Accordion

1'use client';
2 
3import {
4  Content,
5  Header,
6  Item,
7  Root,
8  Trigger,
9} from '@radix-ui/react-accordion';
10import { ChevronDownIcon } from 'lucide-react';
11import { cn } from '@/lib/classnames';
12import type { ComponentProps } from 'react';
13 
14const AccordionRoot = ({ ...props }: ComponentProps<typeof Root>) => {
15  return <Root data-slot='accordion' {...props} />;
16};
17 
18const AccordionItem = ({
19  className,
20  ...props
21}: ComponentProps<typeof Item>) => {
22  return (
23    <Item
24      className={cn('border-b last:border-b-0', className)}
25      data-slot='accordion-item'
26      {...props}
27    />
28  );
29};
30 
31const AccordionTrigger = ({
32  className,
33  children,
34  ...props
35}: ComponentProps<typeof Trigger>) => {
36  return (
37    <Header className='flex'>
38      <Trigger
39        className={cn(
40          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
41          className,
42        )}
43        data-slot='accordion-trigger'
44        {...props}
45      >
46        {children}
47        <ChevronDownIcon className='pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200' />
48      </Trigger>
49    </Header>
50  );
51};
52 
53const AccordionContent = ({
54  className,
55  children,
56  ...props
57}: ComponentProps<typeof Content>) => {
58  return (
59    <Content
60      className='overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
61      data-slot='accordion-content'
62      {...props}
63    >
64      <div className={cn('pt-0 pb-4', className)}>{children}</div>
65    </Content>
66  );
67};
68 
69const Accordion = Object.assign(AccordionRoot, {
70  Item: AccordionItem,
71  Trigger: AccordionTrigger,
72  Content: AccordionContent,
73});
74 
75export { Accordion };