Icon Accordion

import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from "lucide-react";import {  Accordion05,  Accordion05Content,  Accordion05Item,  Accordion05Trigger,} from '@/components/ui/shadcn-io/accordion-05';const items = [  {    id: "1",    icon: CommandIcon,    title: "What makes shadcn.io different?",    content:      "shadcn.io focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",  },  {    id: "2",    icon: EclipseIcon,    title: "How can I customize the components?",    content:      "Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",  },  {    id: "3",    icon: ZapIcon,    title: "Is shadcn.io optimized for performance?",    content:      "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",  },  {    id: "4",    icon: AtSignIcon,    title: "How accessible are the components?",    content:      "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",  },];export default function Component() {  return (    <div className="flex justify-center">      <Accordion05 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion05Item value={item.id} key={item.id}>            <Accordion05Trigger icon={item.icon}>              {item.title}            </Accordion05Trigger>            <Accordion05Content>              {item.content}            </Accordion05Content>          </Accordion05Item>        ))}      </Accordion05>    </div>  );}