Accordion

'use client';

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/san-francisco/ui/accordion';

export default function AccordionDemo() {
  return (
    <Accordion className="w-full max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It ships with default styles that match your theme.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. It animates open and closed by default.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}