Accordion

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