Separated cards

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8const items = [
9  {
10    value: 'overview',
11    title: 'Project overview',
12    body: 'A summary of goals, scope, and the people involved in this project.',
13  },
14  {
15    value: 'timeline',
16    title: 'Timeline',
17    body: 'Key milestones and delivery dates across the next two quarters.',
18  },
19  {
20    value: 'resources',
21    title: 'Resources',
22    body: 'Links to design files, the repository, and the shared drive.',
23  },
24]
25 
26export function Accordion05() {
27  return (
28    <Accordion defaultValue={['overview']} className="w-full max-w-md gap-3">
29      {items.map((item) => (
30        <AccordionItem
31          key={item.value}
32          value={item.value}
33          className="rounded-lg border px-4 not-last:border-b"
34        >
35          <AccordionTrigger>{item.title}</AccordionTrigger>
36          <AccordionContent className="text-muted-foreground">
37            {item.body}
38          </AccordionContent>
39        </AccordionItem>
40      ))}
41    </Accordion>
42  )
43}