{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-6","type":"registry:block","title":"Advanced accordion with custom icons and badges","description":"Advanced accordion with custom icons and badges","dependencies":[],"registryDependencies":["accordion","@reui/badge"],"files":[{"path":"c-accordion-6.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst items = [\n  {\n    value: \"account\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"SettingsIcon\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearIcon\"\n        remixicon=\"RiSettings3Line\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n    trigger: \"Account Settings\",\n    badge: \"New\",\n    content:\n      \"Manage your account preferences, security settings, and personal information. You can also configure two-factor authentication here.\",\n  },\n  {\n    value: \"privacy\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"LockIcon\"\n        tabler=\"IconLock\"\n        hugeicons=\"SquareLock01Icon\"\n        phosphor=\"LockSimpleIcon\"\n        remixicon=\"RiLockLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n    trigger: \"Privacy & Security\",\n    content:\n      \"Control who can see your profile and what data we collect. View our latest security audits and transparency reports.\",\n  },\n  {\n    value: \"support\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"HelpCircleIcon\"\n        tabler=\"IconHelpCircle\"\n        hugeicons=\"HelpCircleIcon\"\n        phosphor=\"QuestionIcon\"\n        remixicon=\"RiQuestionLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n    trigger: \"Help & Support\",\n    content:\n      \"Access our help center, community forums, and contact support. We're here to help you 24/7.\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Accordion\n        multiple={false}\n        defaultValue={[\"account\"]}\n        className=\"space-y-3 border-0\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"border-border bg-card rounded-lg border px-2 **:data-[slot=accordion-content]:p-0!\"\n          >\n            <AccordionTrigger className=\"items-center px-1 py-3 font-semibold hover:no-underline\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-muted rounded-lg flex size-8 items-center justify-center\">\n                  {item.icon}\n                </div>\n                <span>{item.trigger}</span>\n                {item.badge && (\n                  <Badge variant=\"success-light\">{item.badge}</Badge>\n                )}\n              </div>\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground px-2 pt-0 pb-4 leading-relaxed\">\n              <div className=\"pl-11\">{item.content}</div>\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}","target":"components/examples/c-accordion-6.tsx"}],"meta":{"order":6,"label":"Icons & Badges"}}