{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion7",
  "title": "Accordion",
  "description": "Accordion built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/accordion/7/index.tsx",
      "content": "import { BellIcon, ChevronDownIcon, LifeBuoyIcon, Link2Icon, ShieldCheckIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\n\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"Our platform offers flexible pricing plans to suit teams of all sizes. You can start with our free tier and upgrade as your needs grow. All plans include core features with additional benefits for premium subscribers.\",\n    icon: Link2Icon,\n    id: \"1\",\n    sub: \"Choose the right plan for your team\",\n    title: \"What pricing plans are available?\"\n  },\n  {\n    content:\n      \"Yes, you can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period, and you won't be charged for the next cycle.\",\n    icon: BellIcon,\n    id: \"2\",\n    sub: \"Manage your billing and renewals\",\n    title: \"Can I cancel my subscription anytime?\"\n  },\n  {\n    content:\n      \"We accept all major credit cards, PayPal, and bank transfers for annual plans. All payments are processed securely through our encrypted payment gateway to ensure your financial information is protected.\",\n    icon: ShieldCheckIcon,\n    id: \"3\",\n    sub: \"Secure and flexible payment options\",\n    title: \"What payment methods do you accept?\"\n  },\n  {\n    content:\n      \"Our support team is available 24/7 via email and live chat. Premium plan subscribers get priority support with faster response times. We also maintain a comprehensive knowledge base with tutorials and documentation.\",\n    icon: LifeBuoyIcon,\n    id: \"4\",\n    sub: \"Dedicated assistance when you need it\",\n    title: \"What kind of support do you provide?\"\n  }\n];\n\nexport default function Component() {\n  return (\n    <div className=\"w-full max-w-md\">\n      <Accordion collapsible type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex items-center gap-3\">\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full border\">\n                    <item.icon className=\"opacity-60\" size={16} />\n                  </span>\n                  <span className=\"flex flex-col space-y-1\">\n                    <span>{item.title}</span>\n                    {item.sub && <span className=\"text-sm font-normal\">{item.sub}</span>}\n                  </span>\n                </span>\n                <ChevronDownIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"text-muted-foreground ms-3 ps-10 pb-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/accordion7.tsx"
    }
  ],
  "type": "registry:component"
}