{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "settings-section",
  "type": "registry:block",
  "title": "Settings section",
  "description": "A workspace settings section with identity fields, preferences, a save bar, and a confirmed danger zone.",
  "registryDependencies": [
    "https://abackui.com/r/utils.json",
    "https://abackui.com/r/alert-dialog.json",
    "https://abackui.com/r/button.json",
    "https://abackui.com/r/card.json",
    "https://abackui.com/r/field.json",
    "https://abackui.com/r/input.json",
    "https://abackui.com/r/label.json",
    "https://abackui.com/r/switch.json"
  ],
  "categories": [
    "Settings"
  ],
  "docs": "https://abackui.com/docs/blocks/settings-section",
  "meta": {
    "status": "beta"
  },
  "files": [
    {
      "path": "components/blocks/settings-section.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Field } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport interface SettingsValues {\n  name: string;\n  slug: string;\n  weeklyDigest: boolean;\n  deployAlerts: boolean;\n}\n\nexport interface SettingsSectionBlockProps {\n  initialValues?: Partial<SettingsValues>;\n  onSave?: (values: SettingsValues) => void;\n  onDelete?: () => void;\n}\n\n/**\n * A complete workspace settings section: identity, notification preferences,\n * a save bar, and a destructive zone that requires an explicit confirmation.\n * It is a section, not a page; put it inside your settings layout.\n */\nexport function SettingsSectionBlock({\n  initialValues,\n  onSave,\n  onDelete,\n}: SettingsSectionBlockProps) {\n  const [values, setValues] = useState<SettingsValues>({\n    name: initialValues?.name ?? \"Aback Group\",\n    slug: initialValues?.slug ?? \"aback-group\",\n    weeklyDigest: initialValues?.weeklyDigest ?? true,\n    deployAlerts: initialValues?.deployAlerts ?? true,\n  });\n  const [saved, setSaved] = useState(false);\n\n  function update<K extends keyof SettingsValues>(key: K, value: SettingsValues[K]) {\n    setValues((current) => ({ ...current, [key]: value }));\n    setSaved(false);\n  }\n\n  function handleSave() {\n    onSave?.(values);\n    setSaved(true);\n  }\n\n  return (\n    <section aria-labelledby=\"workspace-settings-title\" className=\"flex flex-col gap-6\">\n      <div>\n        <h2\n          id=\"workspace-settings-title\"\n          className=\"text-xl font-semibold tracking-tight text-foreground\"\n        >\n          Workspace settings\n        </h2>\n        <p className=\"mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground\">\n          These settings apply to every member of the workspace.\n        </p>\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle as=\"h3\" className=\"text-base\">\n            General\n          </CardTitle>\n          <CardDescription>How the workspace appears to your team and in URLs.</CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col gap-5\">\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Field htmlFor=\"workspace-name\" label=\"Workspace name\" required>\n              <Input\n                id=\"workspace-name\"\n                value={values.name}\n                onChange={(event) => update(\"name\", event.target.value)}\n              />\n            </Field>\n            <Field\n              htmlFor=\"workspace-slug\"\n              label=\"URL slug\"\n              description=\"Lowercase letters, numbers, and dashes.\"\n            >\n              <Input\n                id=\"workspace-slug\"\n                value={values.slug}\n                onChange={(event) => update(\"slug\", event.target.value)}\n              />\n            </Field>\n          </div>\n\n          <div className=\"flex flex-col divide-y divide-border border-t border-border\">\n            <div className=\"flex items-start justify-between gap-4 py-3\">\n              <div>\n                <Label htmlFor=\"workspace-digest\">Weekly digest</Label>\n                <p className=\"mt-0.5 text-xs leading-relaxed text-muted-foreground\">\n                  A Monday summary of deployments, invoices, and open reviews.\n                </p>\n              </div>\n              <Switch\n                id=\"workspace-digest\"\n                checked={values.weeklyDigest}\n                onCheckedChange={(checked) => update(\"weeklyDigest\", checked)}\n              />\n            </div>\n            <div className=\"flex items-start justify-between gap-4 py-3\">\n              <div>\n                <Label htmlFor=\"workspace-alerts\">Deploy alerts</Label>\n                <p className=\"mt-0.5 text-xs leading-relaxed text-muted-foreground\">\n                  Notify the workspace when a production deploy finishes or fails.\n                </p>\n              </div>\n              <Switch\n                id=\"workspace-alerts\"\n                checked={values.deployAlerts}\n                onCheckedChange={(checked) => update(\"deployAlerts\", checked)}\n              />\n            </div>\n          </div>\n        </CardContent>\n\n        <CardFooter className=\"justify-between gap-3 border-t border-border pt-4\">\n          <p role=\"status\" className=\"text-xs text-muted-foreground\">\n            {saved ? \"Settings saved.\" : \"Changes are local until you save.\"}\n          </p>\n          <div className=\"flex gap-2\">\n            <Button\n              variant=\"ghost\"\n              onClick={() => {\n                setValues({\n                  name: initialValues?.name ?? \"Aback Group\",\n                  slug: initialValues?.slug ?? \"aback-group\",\n                  weeklyDigest: initialValues?.weeklyDigest ?? true,\n                  deployAlerts: initialValues?.deployAlerts ?? true,\n                });\n                setSaved(false);\n              }}\n            >\n              Reset\n            </Button>\n            <Button onClick={handleSave}>Save changes</Button>\n          </div>\n        </CardFooter>\n      </Card>\n\n      <Card className=\"border-danger/40 dark:border-danger/40\">\n        <CardHeader>\n          <CardTitle as=\"h3\" className=\"text-base text-danger\">\n            Danger zone\n          </CardTitle>\n          <CardDescription>\n            Deleting the workspace removes its members, projects, and deploy history. This cannot\n            be undone.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button variant=\"outline\" className=\"border-danger/50 text-danger hover:bg-danger/5\">\n                Delete workspace\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent>\n              <AlertDialogHeader>\n                <AlertDialogTitle>Delete {values.name}?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Every member will lose access immediately, and the deploy history will be\n                  removed. This action cannot be undone.\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Keep workspace</AlertDialogCancel>\n                <AlertDialogAction\n                  className=\"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n                  onClick={onDelete}\n                >\n                  Delete workspace\n                </AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n        </CardContent>\n      </Card>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/settings-section.tsx"
    }
  ]
}