accordion

1"use client"
2
3import * as React from "react"
4import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
5import { ChevronDown } from "lucide-react"
6
7import { cn } from "@/lib/utils"
8
9const Accordion = BaseAccordion.Root
10
11type AccordionItemProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>
12
13const AccordionItem = React.forwardRef<
14    React.ComponentRef<typeof BaseAccordion.Item>,
15    AccordionItemProps
16>(({ className, ...props }, ref) => (
17    <BaseAccordion.Item
18        ref={ref}
19        className={cn(
20            "mb-4 border-2 border-black bg-white shadow-brutal hover:bg-main/20 data-open:bg-main/20 data-open:shadow-brutal transition-colors duration-200 rounded-base",
21            className
22        )}
23        {...props}
24    />
25))
26AccordionItem.displayName = "AccordionItem"
27
28type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>
29
30const AccordionTrigger = React.forwardRef<
31    React.ComponentRef<typeof BaseAccordion.Trigger>,
32    AccordionTriggerProps
33>(({ className, children, ...props }, ref) => (
34    <BaseAccordion.Header className="flex">
35        <BaseAccordion.Trigger
36            ref={ref}
37            className={cn(
38                "flex flex-1 items-center text-left justify-between p-3 font-bold text-black focus-brutal-inset transition-colors duration-200 [&[data-open]>svg]:rotate-180",
39                className
40            )}
41            {...props}
42        >
43            {children}
44            <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 text-black" />
45        </BaseAccordion.Trigger>
46    </BaseAccordion.Header>
47))
48AccordionTrigger.displayName = "AccordionTrigger"
49
50type AccordionContentProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>
51
52const AccordionContent = React.forwardRef<
53    React.ComponentRef<typeof BaseAccordion.Panel>,
54    AccordionContentProps
55>(({ className, children, ...props }, ref) => (
56    <BaseAccordion.Panel
57        ref={ref}
58        className="overflow-hidden text-sm h-(--accordion-panel-height) transition-[height] duration-200 motion-reduce:transition-none data-ending-style:h-0 data-starting-style:h-0 text-black"
59        {...props}
60    >
61        <div className={cn("p-3 pt-0", className)}>{children}</div>
62    </BaseAccordion.Panel>
63))
64AccordionContent.displayName = "AccordionContent"
65
66export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }