Accordion

1"use client"
2 
3import * as React from "react"
4import * as AccordionPrimitive from "@radix-ui/react-accordion"
5import { ChevronDown } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9const Accordion = AccordionPrimitive.Root
10 
11function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
12  return <AccordionPrimitive.Item data-slot="accordion-item" className={cn("border-b border-border/80 last:border-b-0", className)} {...props} />
13}
14 
15function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
16  return (
17    <AccordionPrimitive.Header className="flex">
18      <AccordionPrimitive.Trigger
19        data-slot="accordion-trigger"
20        className={cn(
21          "group flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-semibold tracking-[-0.012em] outline-none transition-colors hover:text-primary focus-visible:ring-2 focus-visible:ring-ring/45 focus-visible:ring-offset-4 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-45 [&[data-state=open]>svg]:rotate-180",
22          className,
23        )}
24        {...props}
25      >
26        {children}
27        <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-300 ease-[cubic-bezier(.16,1,.3,1)] group-hover:text-primary" />
28      </AccordionPrimitive.Trigger>
29    </AccordionPrimitive.Header>
30  )
31}
32 
33function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
34  return (
35    <AccordionPrimitive.Content
36      data-slot="accordion-content"
37      className="overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:animate-none"
38      {...props}
39    >
40      <div className={cn("pb-5 pr-8 leading-6", className)}>{children}</div>
41    </AccordionPrimitive.Content>
42  )
43}
44 
45export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }