{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notifications-4",
  "title": "Notification Preferences Toggles",
  "description": "Notification preferences panel with a row per activity type and separate email and push toggle switches for each.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/notifications/4/notifications-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\n\ntype Channels = { email: boolean; push: boolean }\n\nconst categories = [\n  {\n    id: \"comments\",\n    label: \"Comments\",\n    description: \"When someone comments on your work.\",\n  },\n  {\n    id: \"mentions\",\n    label: \"Mentions\",\n    description: \"When someone @mentions you.\",\n  },\n  {\n    id: \"deploys\",\n    label: \"Deployments\",\n    description: \"When a deploy succeeds or fails.\",\n  },\n  {\n    id: \"digest\",\n    label: \"Weekly digest\",\n    description: \"A summary of activity every Monday.\",\n  },\n]\n\nconst initial: Record<string, Channels> = {\n  comments: { email: true, push: true },\n  mentions: { email: true, push: true },\n  deploys: { email: false, push: true },\n  digest: { email: true, push: false },\n}\n\nexport default function NotificationsBlock() {\n  const [prefs, setPrefs] = useState(initial)\n\n  const toggle = (id: string, channel: keyof Channels) =>\n    setPrefs((prev) => ({\n      ...prev,\n      [id]: { ...prev[id], [channel]: !prev[id][channel] },\n    }))\n\n  return (\n    <section className=\"flex w-full items-start justify-center bg-background px-6 py-16 text-foreground\">\n      <Card className=\"w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Notification preferences</CardTitle>\n          <CardDescription>\n            Choose how you want to hear from us for each type of activity.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-[1fr_auto_auto] items-center gap-x-6 gap-y-1\">\n            <span />\n            <span className=\"text-center text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n              Email\n            </span>\n            <span className=\"text-center text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n              Push\n            </span>\n            {categories.map((category, index) => (\n              <div key={category.id} className=\"contents\">\n                {index > 0 && <Separator className=\"col-span-3 my-2.5\" />}\n                <div className=\"flex flex-col gap-0.5\">\n                  <span className=\"text-sm font-medium\">{category.label}</span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {category.description}\n                  </span>\n                </div>\n                <div className=\"flex justify-center\">\n                  <Switch\n                    checked={prefs[category.id].email}\n                    onCheckedChange={() => toggle(category.id, \"email\")}\n                    aria-label={`${category.label} email`}\n                  />\n                </div>\n                <div className=\"flex justify-center\">\n                  <Switch\n                    checked={prefs[category.id].push}\n                    onCheckedChange={() => toggle(category.id, \"push\")}\n                    aria-label={`${category.label} push`}\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/notifications-4.tsx"
    }
  ],
  "meta": {
    "height": "487px",
    "tier": "free"
  },
  "categories": [
    "notifications"
  ],
  "type": "registry:block"
}