Accordion

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