{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-343",
  "type": "registry:component",
  "title": "Comp 343",
  "description": "Comp 343",
  "files": [
    {
      "path": "registry/ui-basic/comp-343.tsx",
      "content": "import {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n} from \"@/components/ui/accordion\";\nimport {\n\tBellIcon,\n\tLifeBuoyIcon,\n\tLink2Icon,\n\tPlusIcon,\n\tShieldCheckIcon,\n} from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\n\nconst items = [\n\t{\n\t\tid: \"1\",\n\t\ticon: Link2Icon,\n\t\ttitle: \"Connected accounts\",\n\t\tsub: \"Manage your linked social and work accounts\",\n\t\tcontent:\n\t\t\t\"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n\t},\n\t{\n\t\tid: \"2\",\n\t\ticon: BellIcon,\n\t\ttitle: \"Notifications\",\n\t\tsub: \"Customize your notification preferences\",\n\t\tcontent:\n\t\t\t\"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n\t},\n\t{\n\t\tid: \"3\",\n\t\ticon: ShieldCheckIcon,\n\t\ttitle: \"2-step verification\",\n\t\tsub: \"Add an extra layer of security to your account\",\n\t\tcontent:\n\t\t\t\"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n\t},\n\t{\n\t\tid: \"4\",\n\t\ticon: LifeBuoyIcon,\n\t\ttitle: \"Contact support\",\n\t\tsub: \"We're here to help 24/7\",\n\t\tcontent:\n\t\t\t\"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n\t},\n];\n\nexport default function Component() {\n\treturn (\n\t\t<div className=\"space-y-4\">\n\t\t\t<h2 className=\"text-xl font-bold\">\n\t\t\t\tW/ icon, sub-header, and plus-minus\n\t\t\t</h2>\n\t\t\t<Accordion\n\t\t\t\ttype=\"single\"\n\t\t\t\tcollapsible\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\tdefaultValue=\"3\"\n\t\t\t>\n\t\t\t\t{items.map((item) => (\n\t\t\t\t\t<AccordionItem value={item.id} key={item.id} className=\"py-2\">\n\t\t\t\t\t\t<AccordionPrimitive.Header className=\"flex\">\n\t\t\t\t\t\t\t<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-hidden focus-visible:ring-[3px] [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex size-10 shrink-0 items-center justify-center rounded-full border\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<item.icon size={16} className=\"opacity-60\" />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"flex flex-col space-y-1\">\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t{item.sub && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-normal\">\n\t\t\t\t\t\t\t\t\t\t\t\t{item.sub}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AccordionPrimitive.Trigger>\n\t\t\t\t\t\t</AccordionPrimitive.Header>\n\t\t\t\t\t\t<AccordionContent className=\"text-muted-foreground ms-3 ps-10 pb-2\">\n\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t</AccordionItem>\n\t\t\t\t))}\n\t\t\t</Accordion>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}