{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-1",
  "title": "Profile And Notification Cards",
  "description": "Settings page grouping a Profile card (display name, email, visibility select) and a Notifications card of labeled switches, saving with a toast confirmation.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input",
    "select",
    "separator",
    "sonner",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/settings/1/settings-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\nconst VISIBILITY_OPTIONS = [\n  { value: \"everyone\", label: \"Everyone\" },\n  { value: \"team\", label: \"Only my team\" },\n  { value: \"private\", label: \"Just me\" },\n]\n\nconst notificationRows = [\n  {\n    id: \"product-updates\",\n    label: \"Product updates\",\n    description: \"News about features and improvements.\",\n    on: true,\n  },\n  {\n    id: \"weekly-digest\",\n    label: \"Weekly digest\",\n    description: \"A summary of your activity every Monday.\",\n    on: false,\n  },\n  {\n    id: \"mentions\",\n    label: \"Mentions\",\n    description: \"Get notified when someone mentions you.\",\n    on: true,\n  },\n] as const\n\nexport default function SettingsBlock() {\n  const [displayName, setDisplayName] = React.useState(\"Ada Lovelace\")\n  const [email, setEmail] = React.useState(\"ada@acme.com\")\n  const [visibility, setVisibility] = React.useState(\"team\")\n  const [notifications, setNotifications] = React.useState<\n    Record<string, boolean>\n  >(() => Object.fromEntries(notificationRows.map((row) => [row.id, row.on])))\n\n  function handleSave() {\n    toast.success(\"Changes saved\", {\n      id: \"changes-saved\",\n      description: \"Your settings have been updated.\",\n    })\n  }\n\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-4 py-10 text-foreground sm:py-16\">\n      <div className=\"flex w-full max-w-2xl flex-col gap-6\">\n        <div>\n          <h1 className=\"font-heading text-2xl font-bold tracking-tight\">\n            Settings\n          </h1>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            Manage your account preferences and how you receive updates.\n          </p>\n        </div>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Profile</CardTitle>\n          </CardHeader>\n          <CardContent className=\"flex flex-col gap-4\">\n            <Field orientation=\"horizontal\">\n              <FieldContent>\n                <FieldLabel htmlFor=\"display-name\">Display name</FieldLabel>\n                <FieldDescription>\n                  The name shown across your workspace.\n                </FieldDescription>\n              </FieldContent>\n              <Input\n                id=\"display-name\"\n                type=\"text\"\n                value={displayName}\n                onChange={(e) => setDisplayName(e.target.value)}\n                className=\"w-44\"\n              />\n            </Field>\n\n            <Separator />\n\n            <Field orientation=\"horizontal\">\n              <FieldContent>\n                <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n                <FieldDescription>\n                  Used for sign-in and account notices.\n                </FieldDescription>\n              </FieldContent>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                className=\"w-44\"\n              />\n            </Field>\n\n            <Separator />\n\n            <Field orientation=\"horizontal\">\n              <FieldContent>\n                <FieldLabel htmlFor=\"profile-visibility\">\n                  Profile visibility\n                </FieldLabel>\n                <FieldDescription>\n                  Choose who can view your activity.\n                </FieldDescription>\n              </FieldContent>\n              <Select\n                items={VISIBILITY_OPTIONS}\n                value={visibility}\n                onValueChange={(v) => v && setVisibility(v)}\n              >\n                <SelectTrigger id=\"profile-visibility\" className=\"w-44\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {VISIBILITY_OPTIONS.map((option) => (\n                    <SelectItem key={option.value} value={option.value}>\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </Field>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Notifications</CardTitle>\n          </CardHeader>\n          <CardContent className=\"flex flex-col gap-4\">\n            {notificationRows.map((row, index) => (\n              <div key={row.id} className=\"flex flex-col gap-4\">\n                {index > 0 && <Separator />}\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldLabel htmlFor={row.id}>{row.label}</FieldLabel>\n                    <FieldDescription>{row.description}</FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id={row.id}\n                    checked={notifications[row.id]}\n                    onCheckedChange={(checked) =>\n                      setNotifications((prev) => ({\n                        ...prev,\n                        [row.id]: checked,\n                      }))\n                    }\n                  />\n                </Field>\n              </div>\n            ))}\n          </CardContent>\n        </Card>\n\n        <div className=\"flex justify-end\">\n          <Button onClick={handleSave}>Save Changes</Button>\n        </div>\n      </div>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/settings-1.tsx"
    }
  ],
  "meta": {
    "height": "756px",
    "tier": "free"
  },
  "categories": [
    "settings"
  ],
  "type": "registry:block"
}