Accordion

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiChevronDown } from "@mdi/js";
5import { Accordion as AccordionPrimitive } from "radix-ui";
6import type * 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("border-b last:border-b-0", className)}
24      {...props}
25    />
26  );
27}
28 
29function AccordionTrigger({
30  className,
31  children,
32  actions,
33  ...props
34}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
35  actions?: React.ReactNode;
36}) {
37  return (
38    <AccordionPrimitive.Header asChild>
39      <div className="flex items-center hover:bg-blackAlpha-50 transition-colors w-full min-w-0">
40        <AccordionPrimitive.Trigger
41          data-slot="accordion-trigger"
42          className={cn(
43            "focus-visible:border-ring focus-visible:ring-ring/50 text-md font-regular flex flex-1 cursor-pointer items-center justify-between gap-4 px-2 py-4 text-left transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 min-w-0",
44            className,
45          )}
46          {...props}
47        >
48          {children}
49          <Icon
50            path={mdiChevronDown}
51            className="transition-transform duration-200 size-6 shrink-0"
52          />
53        </AccordionPrimitive.Trigger>
54        {actions && (
55          <div
56            className="flex items-center shrink-0 py-4 px-2"
57            onClick={(e) => e.stopPropagation()}
58          >
59            {actions}
60          </div>
61        )}
62      </div>
63    </AccordionPrimitive.Header>
64  );
65}
66 
67function AccordionContent({
68  className,
69  children,
70  ...props
71}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
72  return (
73    <AccordionPrimitive.Content
74      data-slot="accordion-content"
75      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-md overflow-hidden px-2 py-2"
76      {...props}
77    >
78      <div className={cn("pt-0 pb-4", className)}>{children}</div>
79    </AccordionPrimitive.Content>
80  );
81}
82 
83export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };