{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-7","type":"registry:block","title":"Accordion items integrated within Frame and FramePanel","description":"Accordion items integrated within Frame and FramePanel","dependencies":[],"registryDependencies":["accordion","@reui/badge","@reui/frame"],"files":[{"path":"c-accordion-7.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\nimport { Frame, FramePanel } from \"@/components/reui/frame\"\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      <Frame stacked spacing=\"sm\">\n        {items.map((item) => (\n          <FramePanel key={item.value}>\n            <Accordion\n              multiple={false}\n              defaultValue={[items[0].value]}\n              className=\"border-none\"\n            >\n              <AccordionItem\n                value={item.value}\n                className=\"border-none bg-transparent **:data-[slot=accordion-content]:p-0!\"\n              >\n                <AccordionTrigger className=\"items-center px-1 py-1 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\" className=\"ms-1\">\n                        {item.badge}\n                      </Badge>\n                    )}\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground p-0 ps-1!\">\n                  <div className=\"ps-11! pe-2\">{item.content}</div>\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          </FramePanel>\n        ))}\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-accordion-7.tsx"}],"meta":{"order":7,"label":"In Frame"}}