accordion

1"use client";
2 
3import * as React from "react";
4import * as AccordionPrimitive from "@radix-ui/react-accordion";
5import { ChevronDown } from "lucide-react";
6 
7import { cn } from "@aomi-labs/react";
8 
9const Accordion = AccordionPrimitive.Root;
10 
11const AccordionItem = React.forwardRef<
12  React.ElementRef<typeof AccordionPrimitive.Item>,
13  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14>(({ className, ...props }, ref) => (
15  <AccordionPrimitive.Item
16    ref={ref}
17    className={cn("border-b", className)}
18    {...props}
19  />
20));
21AccordionItem.displayName = "AccordionItem";
22 
23const AccordionTrigger = React.forwardRef<
24  React.ElementRef<typeof AccordionPrimitive.Trigger>,
25  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26>(({ className, children, ...props }, ref) => (
27  <AccordionPrimitive.Header className="flex">
28    <AccordionPrimitive.Trigger
29      ref={ref}
30      className={cn(
31        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32        className,
33      )}
34      {...props}
35    >
36      {children}
37      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38    </AccordionPrimitive.Trigger>
39  </AccordionPrimitive.Header>
40));
41AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
42 
43const AccordionContent = React.forwardRef<
44  React.ElementRef<typeof AccordionPrimitive.Content>,
45  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46>(({ className, children, ...props }, ref) => (
47  <AccordionPrimitive.Content
48    ref={ref}
49    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
50    {...props}
51  >
52    <div className={cn("pb-4 pt-0", className)}>{children}</div>
53  </AccordionPrimitive.Content>
54));
55 
56AccordionContent.displayName = AccordionPrimitive.Content.displayName;
57 
58export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };