Expand all

1'use client'
2 
3import { useState } from 'react'
4 
5import {
6  Accordion,
7  AccordionContent,
8  AccordionItem,
9  AccordionTrigger,
10} from '@/components/ui/accordion'
11import { Button } from '@/components/ui/button'
12 
13const items = [
14  {
15    value: 'item-1',
16    title: 'Step 1 — Create your account',
17    body: 'Sign up with your email and verify it to unlock your workspace.',
18  },
19  {
20    value: 'item-2',
21    title: 'Step 2 — Invite your team',
22    body: 'Add teammates by email and assign them roles.',
23  },
24  {
25    value: 'item-3',
26    title: 'Step 3 — Connect your tools',
27    body: 'Link the integrations your team already uses.',
28  },
29]
30 
31const allValues = items.map((item) => item.value)
32 
33export function Accordion14() {
34  const [open, setOpen] = useState<string[]>([allValues[0]])
35 
36  return (
37    <div className="flex w-full max-w-md flex-col gap-3">
38      <div className="flex justify-end gap-2">
39        <Button
40          variant="outline"
41          size="sm"
42          onClick={() => setOpen(allValues)}
43          disabled={open.length === allValues.length}
44        >
45          Expand all
46        </Button>
47        <Button
48          variant="outline"
49          size="sm"
50          onClick={() => setOpen([])}
51          disabled={open.length === 0}
52        >
53          Collapse all
54        </Button>
55      </div>
56      <Accordion multiple value={open} onValueChange={setOpen}>
57        {items.map((item) => (
58          <AccordionItem key={item.value} value={item.value}>
59            <AccordionTrigger>{item.title}</AccordionTrigger>
60            <AccordionContent className="text-muted-foreground">
61              {item.body}
62            </AccordionContent>
63          </AccordionItem>
64        ))}
65      </Accordion>
66    </div>
67  )
68}