{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-switch-14","type":"registry:block","title":"Switch with descriptions in card grid","description":"Switch with descriptions in card grid","dependencies":[],"registryDependencies":["field","switch"],"files":[{"path":"c-switch-14.tsx","type":"registry:block","content":"import {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst features = [\n  {\n    id: \"feat-analytics\",\n    title: \"Analytics\",\n    description: \"Track page views and user interactions\",\n    checked: true,\n    icon: (\n      <IconPlaceholder\n        lucide=\"BarChart3Icon\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"ChartBarLineIcon\"\n        phosphor=\"ChartBarIcon\"\n        remixicon=\"RiBarChartBoxLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    id: \"feat-logging\",\n    title: \"Error Logging\",\n    description: \"Capture and report runtime errors\",\n    checked: true,\n    icon: (\n      <IconPlaceholder\n        lucide=\"BugIcon\"\n        tabler=\"IconBug\"\n        hugeicons=\"Bug01Icon\"\n        phosphor=\"BugIcon\"\n        remixicon=\"RiBugLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    id: \"feat-cdn\",\n    title: \"CDN Caching\",\n    description: \"Serve static assets from edge network\",\n    checked: false,\n    icon: (\n      <IconPlaceholder\n        lucide=\"GlobeIcon\"\n        tabler=\"IconWorld\"\n        hugeicons=\"Globe02Icon\"\n        phosphor=\"GlobeSimpleIcon\"\n        remixicon=\"RiGlobalLine\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n  {\n    id: \"feat-backup\",\n    title: \"Auto Backup\",\n    description: \"Daily snapshots of your database\",\n    checked: false,\n    icon: (\n      <IconPlaceholder\n        lucide=\"DatabaseIcon\"\n        tabler=\"IconDatabase\"\n        hugeicons=\"Database02Icon\"\n        phosphor=\"DatabaseIcon\"\n        remixicon=\"RiDatabase2Line\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      />\n    ),\n  },\n]\n\nexport function Pattern() {\n  return (\n    <FieldGroup className=\"grid w-full max-w-md grid-cols-2 gap-4\">\n      {features.map((feature) => (\n        <FieldLabel key={feature.id} htmlFor={feature.id} className=\"p-0!\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldTitle className=\"flex items-start gap-2\">\n                <div className=\"bg-background border-border flex shrink-0 items-center justify-center rounded-md border p-1.5 shadow-xs shadow-black/5\">\n                  {feature.icon}\n                </div>\n                <div className=\"flex flex-col items-start gap-0.5\">\n                  <span className=\"text-sm font-semibold\">{feature.title}</span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    {feature.description}\n                  </span>\n                </div>\n              </FieldTitle>\n            </FieldContent>\n            <Switch\n              id={feature.id}\n              defaultChecked={feature.checked}\n              size=\"sm\"\n            />\n          </Field>\n        </FieldLabel>\n      ))}\n    </FieldGroup>\n  )\n}","target":"components/examples/c-switch-14.tsx"}],"meta":{"order":14}}