+ "content": "import { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nconst items = [\n {\n id: \"1\",\n title: \"What makes coss.com ui different?\",\n collapsibles: [\n {\n title: \"What about performance?\",\n content:\n \"We optimize every component for maximum performance and minimal bundle size.\",\n },\n {\n title: \"How is the documentation?\",\n content:\n \"Our documentation is comprehensive and includes live examples for every component.\",\n },\n ],\n },\n {\n id: \"2\",\n title: \"How can I customize the components?\",\n collapsibles: [\n {\n title: \"Can I use custom themes?\",\n content:\n \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n },\n {\n title: \"What about Tailwind support?\",\n content:\n \"We have first-class support for Tailwind CSS with custom utility classes.\",\n },\n ],\n },\n {\n id: \"3\",\n title: \"Is coss.com ui optimized for performance?\",\n collapsibles: [\n {\n title: \"What's the bundle size impact?\",\n content:\n \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n open: true,\n },\n {\n title: \"How is code splitting handled?\",\n content:\n \"We support automatic code splitting for optimal loading performance.\",\n },\n ],\n },\n {\n id: \"4\",\n title: \"How accessible are the components?\",\n collapsibles: [\n {\n title: \"Which screen readers are supported?\",\n content:\n \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n },\n {\n title: \"What about keyboard navigation?\",\n content:\n \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n },\n ],\n },\n]\n\nexport default function Component() {\n return (\n <div className=\"space-y-4\">\n <h2 className=\"text-xl font-bold\">Multi-level</h2>\n <Accordion multiple className=\"w-full -space-y-px\" defaultValue={[\"3\"]}>\n {items.map((item) => (\n <AccordionItem\n value={item.id}\n key={item.id}\n className=\"relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n >\n <AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\">\n {item.title}\n </AccordionTrigger>\n <AccordionContent className=\"p-0\">\n {item.collapsibles.map((collapsible, index) => (\n <CollapsibleDemo\n key={index}\n title={collapsible.title}\n content={collapsible.content}\n open={collapsible.open}\n />\n ))}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n </div>\n )\n}\n\nfunction CollapsibleDemo({\n title,\n content,\n open,\n}: {\n title: string\n content: string\n open?: boolean\n}) {\n return (\n <Collapsible className=\"border-t bg-accent px-4 py-3\" defaultOpen={open}>\n <CollapsibleTrigger className=\"flex gap-2 text-[15px] leading-6 font-semibold [&[data-panel-open]>svg]:rotate-180\">\n <ChevronDownIcon\n size={16}\n className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n aria-hidden=\"true\"\n />\n {title}\n </CollapsibleTrigger>\n <CollapsibleContent className=\"data-[panel-closed]:animate-collapsible-up data-[panel-open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm text-muted-foreground transition-all\">\n {content}\n </CollapsibleContent>\n </Collapsible>\n )\n}\n",
0 commit comments