{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-notifications-01",
  "type": "registry:block",
  "description": "Notification preferences management",
  "registryDependencies": [
    "button",
    "card",
    "switch"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-notifications-01/page.tsx",
      "content": "\"use client\"\n\nimport { Bell, Mail, MessageSquare, Smartphone } from \"lucide-react\"\n\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst TABLE_HEAD = [\n  { label: \"Activity\", icon: Bell },\n  { label: \"Email\", icon: Mail },\n  { label: \"Push\", icon: Smartphone },\n  { label: \"SMS\", icon: MessageSquare },\n]\n\nconst NOTIFICATIONS = [\n  {\n    title: \"Mentions\",\n    description: \"Notify when another user mentions you in a comment\",\n    category: \"Social\",\n    email: true,\n    push: false,\n    sms: true,\n  },\n  {\n    title: \"Comments\",\n    description: \"Notify when another user comments on your item\",\n    category: \"Social\",\n    email: true,\n    push: false,\n    sms: true,\n  },\n  {\n    title: \"New Follower\",\n    description: \"Notify when someone starts following you\",\n    category: \"Social\",\n    email: false,\n    push: true,\n    sms: false,\n  },\n  {\n    title: \"Login Activity\",\n    description: \"Alert when logging in from a new device or location\",\n    category: \"Security\",\n    email: true,\n    push: true,\n    sms: true,\n  },\n  {\n    title: \"Password Changed\",\n    description: \"Immediate notification when password is updated\",\n    category: \"Security\",\n    email: true,\n    push: true,\n    sms: true,\n  },\n  {\n    title: \"Product Updates\",\n    description: \"Get notified about new features and improvements\",\n    category: \"Product\",\n    email: true,\n    push: false,\n    sms: false,\n  },\n]\n\nexport default function AccountNotifications01() {\n  return (\n    <div className=\"mx-auto max-w-5xl p-6\">\n      <Card className=\"bg-card border p-8\">\n        <div className=\"mb-8 border-b pb-6\">\n          <h2 className=\"text-2xl font-semibold tracking-tight\">\n            Notification Preferences\n          </h2>\n          <p className=\"text-muted-foreground mt-2 text-sm\">\n            Customize how you receive notifications. These settings apply to all\n            activities you&apos;re monitoring across the platform.\n          </p>\n        </div>\n\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full min-w-[40rem] table-auto text-left\">\n            <thead>\n              <tr className=\"border-b\">\n                {TABLE_HEAD.map((head, i) => {\n                  const Icon = head.icon\n                  return (\n                    <th\n                      key={head.label}\n                      className={`${\n                        i === 0 ? \"py-4 pr-4\" : \"p-4 text-center\"\n                      } font-semibold`}\n                    >\n                      <div\n                        className={`flex items-center gap-2 ${\n                          i !== 0 ? \"justify-center\" : \"\"\n                        }`}\n                      >\n                        <Icon className=\"text-muted-foreground h-4 w-4\" />\n                        <span className=\"text-sm\">{head.label}</span>\n                      </div>\n                    </th>\n                  )\n                })}\n              </tr>\n            </thead>\n            <tbody>\n              {NOTIFICATIONS.map((notification, index) => {\n                const isLast = index === NOTIFICATIONS.length - 1\n                const classes = isLast ? \"py-6\" : \"border-border border-b py-6\"\n\n                return (\n                  <tr\n                    key={notification.title}\n                    className=\"group hover:bg-muted/50\"\n                  >\n                    <td className={`${classes} pr-4`}>\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <p className=\"font-semibold\">{notification.title}</p>\n                          <span className=\"text-muted-foreground rounded-full border px-2 py-0.5 text-xs\">\n                            {notification.category}\n                          </span>\n                        </div>\n                        <p className=\"text-muted-foreground text-sm\">\n                          {notification.description}\n                        </p>\n                      </div>\n                    </td>\n                    <td className={`${classes} px-4`}>\n                      <div className=\"flex justify-center\">\n                        <Switch\n                          defaultChecked={notification.email}\n                          id={`email-${index}`}\n                          aria-label={`Email notifications for ${notification.title}`}\n                        />\n                      </div>\n                    </td>\n                    <td className={`${classes} px-4`}>\n                      <div className=\"flex justify-center\">\n                        <Switch\n                          defaultChecked={notification.push}\n                          id={`push-${index}`}\n                          aria-label={`Push notifications for ${notification.title}`}\n                        />\n                      </div>\n                    </td>\n                    <td className={`${classes} px-4`}>\n                      <div className=\"flex justify-center\">\n                        <Switch\n                          defaultChecked={notification.sms}\n                          id={`sms-${index}`}\n                          aria-label={`SMS notifications for ${notification.title}`}\n                        />\n                      </div>\n                    </td>\n                  </tr>\n                )\n              })}\n            </tbody>\n          </table>\n        </div>\n\n        <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n          <div className=\"flex items-start gap-3\">\n            <Bell className=\"text-muted-foreground mt-0.5 h-5 w-5\" />\n            <div>\n              <h4 className=\"mb-1 text-sm font-medium\">\n                About Notification Delivery\n              </h4>\n              <p className=\"text-muted-foreground text-sm\">\n                Email notifications are sent instantly. Push notifications\n                require the mobile app. SMS notifications may incur carrier\n                charges. You can change these settings at any time.\n              </p>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-notifications/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "900px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "account"
  ]
}