{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-page",
  "title": "Settings Page",
  "description": "A responsive settings page block with profile, notification, and security sections.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input",
    "separator",
    "switch",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/corr/components/settings-page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { BellIcon, ShieldIcon, UserIcon } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n\nexport function SettingsPage({\n  defaultTab = \"profile\",\n}: {\n  defaultTab?: \"profile\" | \"notifications\" | \"security\"\n}) {\n  const reduceMotion = useReducedMotion()\n\n  const MotionSection = ({ children }: { children: React.ReactNode }) => (\n    <motion.div\n      initial={{ opacity: 0, y: reduceMotion ? 0 : 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: reduceMotion ? 0 : 0.18 }}\n    >\n      {children}\n    </motion.div>\n  )\n\n  return (\n    <div className=\"rounded-md border bg-card\">\n      <div className=\"border-b p-4\">\n        <h2 className=\"text-lg font-semibold\">Settings</h2>\n        <p className=\"mt-1 text-sm text-muted-foreground\">\n          Manage account details, notifications, and access controls.\n        </p>\n      </div>\n      <Tabs\n        defaultValue={defaultTab}\n        orientation=\"vertical\"\n        className=\"grid gap-0 md:grid-cols-[14rem_minmax(0,1fr)]\"\n      >\n        <div className=\"border-b p-3 md:border-r md:border-b-0\">\n          <TabsList className=\"grid h-auto w-full grid-cols-3 md:grid-cols-1\">\n            <TabsTrigger value=\"profile\" className=\"justify-start\">\n              <UserIcon className=\"size-4\" />\n              Profile\n            </TabsTrigger>\n            <TabsTrigger value=\"notifications\" className=\"justify-start\">\n              <BellIcon className=\"size-4\" />\n              Alerts\n            </TabsTrigger>\n            <TabsTrigger value=\"security\" className=\"justify-start\">\n              <ShieldIcon className=\"size-4\" />\n              Security\n            </TabsTrigger>\n          </TabsList>\n        </div>\n        <div className=\"min-w-0 p-4\">\n          <TabsContent value=\"profile\" className=\"mt-0\">\n            <MotionSection>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Profile</CardTitle>\n                  <CardDescription>\n                    Keep public account information up to date.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"grid gap-4 sm:grid-cols-2\">\n                  <Field>\n                    <FieldLabel>Name</FieldLabel>\n                    <Input defaultValue=\"Liam Corrigan\" />\n                  </Field>\n                  <Field>\n                    <FieldLabel>Email</FieldLabel>\n                    <Input defaultValue=\"liam@example.com\" />\n                  </Field>\n                  <div className=\"sm:col-span-2\">\n                    <Button>Save profile</Button>\n                  </div>\n                </CardContent>\n              </Card>\n            </MotionSection>\n          </TabsContent>\n          <TabsContent value=\"notifications\" className=\"mt-0\">\n            <MotionSection>\n              <SettingsPanel\n                title=\"Notifications\"\n                description=\"Choose which operational events should reach you.\"\n                rows={[\n                  [\"Build updates\", \"Registry build status and failures.\"],\n                  [\"Install events\", \"Notify when a component is installed.\"],\n                  [\"Weekly summary\", \"A digest of usage and changes.\"],\n                ]}\n              />\n            </MotionSection>\n          </TabsContent>\n          <TabsContent value=\"security\" className=\"mt-0\">\n            <MotionSection>\n              <SettingsPanel\n                title=\"Security\"\n                description=\"Control account protection and review prompts.\"\n                rows={[\n                  [\"Two-factor authentication\", \"Require a second factor.\"],\n                  [\"Session alerts\", \"Email when a new device signs in.\"],\n                  [\"Destructive confirmations\", \"Confirm risky workspace actions.\"],\n                ]}\n              />\n            </MotionSection>\n          </TabsContent>\n        </div>\n      </Tabs>\n    </div>\n  )\n}\n\nfunction SettingsPanel({\n  title,\n  description,\n  rows,\n}: {\n  title: string\n  description: string\n  rows: [string, string][]\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        <CardDescription>{description}</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"space-y-4\">\n          {rows.map(([label, helper], index) => (\n            <React.Fragment key={label}>\n              {index > 0 ? <Separator /> : null}\n              <div className=\"flex items-center justify-between gap-4\">\n                <div className=\"min-w-0\">\n                  <div className=\"text-sm font-medium\">{label}</div>\n                  <div className=\"mt-1 text-xs text-muted-foreground\">\n                    {helper}\n                  </div>\n                </div>\n                <Switch defaultChecked={index !== rows.length - 1} />\n              </div>\n            </React.Fragment>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}