Accordion

1'use client';
2 
3import * as React from 'react';
4import * as AccordionPrimitive from '@radix-ui/react-accordion';
5import { Plus } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8const Accordion = AccordionPrimitive.Root;
9 
10const AccordionItem = React.forwardRef<
11  React.ComponentRef<typeof AccordionPrimitive.Item>,
12  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
13>(({ className, ...props }, ref) => (
14  <AccordionPrimitive.Item
15    ref={ref}
16    className={cn('border-b', className)}
17    {...props}
18  />
19));
20AccordionItem.displayName = 'AccordionItem';
21 
22const AccordionTrigger = React.forwardRef<
23  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
24  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
25>(({ className, children, ...props }, ref) => (
26  <AccordionPrimitive.Header className='flex'>
27    <AccordionPrimitive.Trigger
28      ref={ref}
29      className={cn(
30        'flex flex-1 items-center justify-between py-4 text-sm font-medium text-foreground text-left hover:underline transition-transform duration-300 ease-in-out',
31        '[&[data-state=open]>svg]:rotate-45',
32        className,
33      )}
34      {...props}
35    >
36      {children}
37      <Plus className='h-4 w-4 shrink-0 text-primary transition-transform duration-300 ease-in-out' />
38    </AccordionPrimitive.Trigger>
39  </AccordionPrimitive.Header>
40));
41AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
42 
43const AccordionContent = React.forwardRef<
44  React.ComponentRef<typeof AccordionPrimitive.Content>,
45  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46>(({ className, children, ...props }, ref) => (
47  <AccordionPrimitive.Content
48    ref={ref}
49    className={cn(
50      'overflow-hidden text-sm text-foreground transition-all',
51      'data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up',
52      className,
53    )}
54    {...props}
55  >
56    <div
57      className={cn(
58        'w-full p-5 rounded-xl bg-muted/60 backdrop-blur-xs border border-border flex items-center animate-shake-smooth',
59        className,
60      )}
61    >
62      {children}
63    </div>
64  </AccordionPrimitive.Content>
65));
66AccordionContent.displayName = AccordionPrimitive.Content.displayName;
67 
68export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };