accordion.tsx raw

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