Left chevron

1import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
2import { ChevronRightIcon } from 'lucide-react'
3 
4const items = [
5  {
6    value: 'getting-started',
7    title: 'Getting started',
8    body: 'Install the CLI, authenticate, and scaffold your first project in under a minute.',
9  },
10  {
11    value: 'configuration',
12    title: 'Configuration',
13    body: 'Tune build targets, environment variables, and output paths from a single config file.',
14  },
15  {
16    value: 'deployment',
17    title: 'Deployment',
18    body: 'Ship to preview and production with atomic, instantly reversible deploys.',
19  },
20]
21 
22export function Accordion07() {
23  return (
24    <AccordionPrimitive.Root
25      defaultValue={['getting-started']}
26      className="flex w-full max-w-md flex-col"
27    >
28      {items.map((item) => (
29        <AccordionPrimitive.Item
30          key={item.value}
31          value={item.value}
32          className="not-last:border-b"
33        >
34          <AccordionPrimitive.Header className="flex">
35            <AccordionPrimitive.Trigger className="group/trigger flex flex-1 items-center gap-2 py-4 text-left text-sm font-medium outline-none focus-visible:underline">
36              <ChevronRightIcon className="text-muted-foreground size-4 shrink-0 transition-transform group-aria-expanded/trigger:rotate-90" />
37              {item.title}
38            </AccordionPrimitive.Trigger>
39          </AccordionPrimitive.Header>
40          <AccordionPrimitive.Panel className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm">
41            <p className="text-muted-foreground h-(--accordion-panel-height) pb-4 pl-6 data-ending-style:h-0 data-starting-style:h-0">
42              {item.body}
43            </p>
44          </AccordionPrimitive.Panel>
45        </AccordionPrimitive.Item>
46      ))}
47    </AccordionPrimitive.Root>
48  )
49}