Accordion

1"use client";
2 
3import * as AccordionPrimitive from "@radix-ui/react-accordion";
4import { ChevronDownIcon } from "lucide-react";
5import type * as React from "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      className={cn("border-b last:border-b-0", className)}
22      data-slot="accordion-item"
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        className={cn(
37          "flex min-h-11 flex-1 touch-manipulation items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-colors hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 motion-safe:duration-200 [&[data-state=open]>svg]:rotate-180",
38          className
39        )}
40        data-slot="accordion-trigger"
41        type="button"
42        {...props}
43      >
44        {children}
45        <ChevronDownIcon
46          aria-hidden="true"
47          className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
48        />
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      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:animate-none"
62      data-slot="accordion-content"
63      {...props}
64    >
65      <div className={cn("pt-0 pb-4", className)}>{children}</div>
66    </AccordionPrimitive.Content>
67  );
68}
69 
70export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };