Accordion

1import * as React from 'react'
2import * as AccordionPrimitive from '@radix-ui/react-accordion'
3import { ChevronDown } from 'lucide-react'
4import { cn } from '@/lib/utils'
5 
6const Accordion = AccordionPrimitive.Root
7 
8const AccordionItem = React.forwardRef<
9  React.ElementRef<typeof AccordionPrimitive.Item>,
10  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
11>(({ className, ...props }, ref) => (
12  <AccordionPrimitive.Item
13    ref={ref}
14    className={cn('border-3 border-foreground border-b-0 last:border-b-3 shadow-[4px_4px_0px_hsl(var(--shadow-color))]', className)}
15    {...props}
16  />
17))
18AccordionItem.displayName = 'AccordionItem'
19 
20const AccordionTrigger = React.forwardRef<
21  React.ElementRef<typeof AccordionPrimitive.Trigger>,
22  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
23>(({ className, children, ...props }, ref) => (
24  <AccordionPrimitive.Header className="flex">
25    <AccordionPrimitive.Trigger
26      ref={ref}
27      className={cn(
28        'flex flex-1 items-center justify-between bg-background py-4 px-4 font-bold uppercase tracking-wide transition duration-200 hover:bg-muted [&[data-state=open]]:bg-accent [&[data-state=open]>svg]:rotate-180',
29        className
30      )}
31      {...props}
32    >
33      {children}
34      <ChevronDown className="h-5 w-5 shrink-0 stroke-[3] transition-transform duration-200" />
35    </AccordionPrimitive.Trigger>
36  </AccordionPrimitive.Header>
37))
38AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
39 
40const AccordionContent = React.forwardRef<
41  React.ElementRef<typeof AccordionPrimitive.Content>,
42  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
43>(({ className, children, ...props }, ref) => (
44  <AccordionPrimitive.Content
45    ref={ref}
46    className="overflow-hidden text-sm transition data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down border-t-3 border-foreground"
47    {...props}
48  >
49    <div className={cn('p-4', className)}>{children}</div>
50  </AccordionPrimitive.Content>
51))
52AccordionContent.displayName = AccordionPrimitive.Content.displayName
53 
54export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }