kovakmedya
cb150f7a24
- CRM domain modules removed (customers, services, software, calendar, tasks, invoices, leads, finance, etc.)
- DLS branding: package name=lab, logo wordmark, sidebar nav, header CTA
- Tenant layer extended with kind dimension (lab|clinic) + requireTenantKind helper
- Schema rewritten for DLS domain: jobs, job_files, job_status_history, prosthetics, connections, finance_entries, notifications
- Onboarding form: clinic/lab account-type selection + auto-generated memberNumber
- Placeholder routes for jobs/{inbound,outbound,new}, products, finance, connections
- PDF spec + spec.md under belgeler/
- db: lab database + 13 collections + indexes + storage bucket (job-files) provisioned via Appwrite MCP
Ref: belgeler/dls-ui-tasarim.pdf
126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface DotPatternProps {
|
|
className?: string
|
|
size?: "sm" | "md" | "lg"
|
|
opacity?: "low" | "medium" | "high"
|
|
fadeStyle?: "ellipse" | "circle" | "none"
|
|
}
|
|
|
|
export function DotPattern({
|
|
className,
|
|
size = "md",
|
|
opacity = "medium",
|
|
fadeStyle = "ellipse"
|
|
}: DotPatternProps) {
|
|
// Use predefined Tailwind classes instead of template literals for Next.js compatibility
|
|
const sizeMap = {
|
|
sm: "[background-size:12px_12px]",
|
|
md: "[background-size:16px_16px]",
|
|
lg: "[background-size:20px_20px]"
|
|
}
|
|
|
|
const opacityMap = {
|
|
low: "opacity-30",
|
|
medium: "opacity-50",
|
|
high: "opacity-70"
|
|
}
|
|
|
|
const fadeMap = {
|
|
ellipse: "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
|
|
circle: "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
|
|
none: ""
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] dark:bg-[radial-gradient(#374151_1px,transparent_1px)]",
|
|
sizeMap[size],
|
|
fadeMap[fadeStyle],
|
|
opacityMap[opacity],
|
|
className
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// Alternative themed variants
|
|
export function DotPatternLight({
|
|
className,
|
|
size = "md",
|
|
opacity = "medium",
|
|
fadeStyle = "ellipse"
|
|
}: DotPatternProps) {
|
|
// Use predefined Tailwind classes instead of template literals for Next.js compatibility
|
|
const sizeMap = {
|
|
sm: "[background-size:12px_12px]",
|
|
md: "[background-size:16px_16px]",
|
|
lg: "[background-size:20px_20px]"
|
|
}
|
|
|
|
const opacityMap = {
|
|
low: "opacity-20",
|
|
medium: "opacity-40",
|
|
high: "opacity-60"
|
|
}
|
|
|
|
const fadeMap = {
|
|
ellipse: "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
|
|
circle: "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
|
|
none: ""
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-[radial-gradient(#d1d5db_1px,transparent_1px)]",
|
|
sizeMap[size],
|
|
fadeMap[fadeStyle],
|
|
opacityMap[opacity],
|
|
className
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function DotPatternDark({
|
|
className,
|
|
size = "md",
|
|
opacity = "medium",
|
|
fadeStyle = "ellipse"
|
|
}: DotPatternProps) {
|
|
// Use predefined Tailwind classes instead of template literals for Next.js compatibility
|
|
const sizeMap = {
|
|
sm: "[background-size:12px_12px]",
|
|
md: "[background-size:16px_16px]",
|
|
lg: "[background-size:20px_20px]"
|
|
}
|
|
|
|
const opacityMap = {
|
|
low: "opacity-30",
|
|
medium: "opacity-50",
|
|
high: "opacity-70"
|
|
}
|
|
|
|
const fadeMap = {
|
|
ellipse: "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
|
|
circle: "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
|
|
none: ""
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-[radial-gradient(#4b5563_1px,transparent_1px)]",
|
|
sizeMap[size],
|
|
fadeMap[fadeStyle],
|
|
opacityMap[opacity],
|
|
className
|
|
)}
|
|
/>
|
|
)
|
|
}
|