{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-16",
  "title": "Notification Settings",
  "description": "A notification settings component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "label",
    "scroll-area",
    "checkbox"
  ],
  "files": [
    {
      "path": "src/components/customized/checkbox/checkbox-16.tsx",
      "content": "\"use client\";\n\nimport {\n  Bell,\n  CalendarCheck,\n  CalendarCog,\n  CalendarPlus,\n  CalendarX,\n  type LucideIcon,\n} from \"lucide-react\";\nimport { Label } from \"@/components/ui/label\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Checkbox } from \"@/registry/ui/checkbox\";\n\ninterface NotificationType {\n  label: string;\n  value: string;\n  icon: LucideIcon;\n}\n\nexport default function Checkbox16() {\n  return (\n    <div>\n      <Label className=\"ps-1 font-medium\">Notification Settings</Label>\n      <div className=\"mt-2.5 rounded-lg border bg-muted/30\">\n        <ScrollArea className=\"h-64\">\n          <table className=\"w-full\">\n            <thead className=\"sticky top-0 z-1 rounded-t-lg bg-muted/80 backdrop-blur-sm\">\n              <tr className=\"rounded-t-lg border-b *:first:rounded-tl-lg *:last:rounded-tr-lg\">\n                <th className=\"p-3 text-left font-medium text-muted-foreground text-xs\">\n                  Notification Type\n                </th>\n                <th className=\"w-16 p-3 font-medium text-muted-foreground text-xs\">\n                  In-App\n                </th>\n                <th className=\"w-16 p-3 font-medium text-muted-foreground text-xs\">\n                  Email\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              {notificationTypes.map((notificationType, index) => (\n                <tr\n                  className=\"border-b last:border-b-0\"\n                  key={notificationType.value}\n                >\n                  <td className=\"p-3\">\n                    <div className=\"flex items-center gap-2.5\">\n                      <notificationType.icon className=\"size-4 text-muted-foreground\" />\n                      <span className=\"text-sm\">{notificationType.label}</span>\n                    </div>\n                  </td>\n                  <td className=\"p-3 text-center\">\n                    <Checkbox\n                      className=\"bg-background\"\n                      defaultChecked={index < 3}\n                      id={`${notificationType.value}-in-app`}\n                      value={`${notificationType.value}-in-app`}\n                    />\n                  </td>\n                  <td className=\"p-3 text-center\">\n                    <Checkbox\n                      className=\"bg-background\"\n                      defaultChecked={index < 3}\n                      id={`${notificationType.value}-email`}\n                      value={`${notificationType.value}-email`}\n                    />\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </ScrollArea>\n      </div>\n    </div>\n  );\n}\n\nconst notificationTypes: NotificationType[] = [\n  { label: \"New Booking\", value: \"new-booking\", icon: CalendarPlus },\n  { label: \"Booking Cancelled\", value: \"booking-cancelled\", icon: CalendarX },\n  { label: \"Booking Updated\", value: \"booking-updated\", icon: CalendarCog },\n  { label: \"Booking Reminder\", value: \"booking-reminder-1\", icon: Bell },\n  {\n    label: \"Booking Confirmation\",\n    value: \"booking-confirmation\",\n    icon: CalendarCheck,\n  },\n  { label: \"Payment Reminder\", value: \"payment-reminder\", icon: Bell },\n  { label: \"Upcoming Reminder\", value: \"upcoming-reminder\", icon: Bell },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}