Plus / minus icon

1import { PlusIcon } from 'lucide-react'
2import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
3 
4import {
5  Accordion,
6  AccordionContent,
7  AccordionItem,
8} from '@/components/ui/accordion'
9 
10const faqs = [
11  {
12    q: 'How do I reset my password?',
13    a: 'Open the sign-in page, choose "Forgot password", and follow the emailed link to set a new one.',
14  },
15  {
16    q: 'Can I invite teammates?',
17    a: 'Yes. Invite unlimited teammates from the Members tab — they each get their own seat.',
18  },
19  {
20    q: 'Where is my data stored?',
21    a: 'Data is encrypted at rest and stored in the region you select when you create your workspace.',
22  },
23]
24 
25export function Accordion06() {
26  return (
27    <Accordion className="w-full max-w-md">
28      {faqs.map((faq) => (
29        <AccordionItem key={faq.q} value={faq.q}>
30          <AccordionPrimitive.Header className="flex">
31            <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-all outline-none focus-visible:underline disabled:pointer-events-none disabled:opacity-50 aria-expanded:[&>svg]:rotate-180 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 aria-expanded:[&>svg>path:last-child]:rotate-90 aria-expanded:[&>svg>path:last-child]:opacity-0">
32              {faq.q}
33              <PlusIcon
34                aria-hidden
35                className="pointer-events-none size-4 shrink-0 opacity-60 transition-transform duration-200"
36              />
37            </AccordionPrimitive.Trigger>
38          </AccordionPrimitive.Header>
39          <AccordionContent className="text-muted-foreground">
40            {faq.a}
41          </AccordionContent>
42        </AccordionItem>
43      ))}
44    </Accordion>
45  )
46}