Accordion

1"use client";
2 
3import * as AccordionPrimitive from "@radix-ui/react-accordion";
4import { ChevronDown } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { focusRing, glass } from "@/lib/glass";
8 
9const Accordion = AccordionPrimitive.Root;
10 
11const AccordionItem = 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(
18      glass,
19      "mb-2.5 transition-colors last:mb-0",
20      "hover:bg-black/[0.025] dark:hover:bg-white/[0.05]",
21      className,
22    )}
23    {...props}
24  />
25));
26AccordionItem.displayName = "AccordionItem";
27 
28const AccordionTrigger = forwardRef<
29  React.ElementRef<typeof AccordionPrimitive.Trigger>,
30  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
31>(({ className, children, ...props }, ref) => (
32  <AccordionPrimitive.Header className="flex">
33    <AccordionPrimitive.Trigger
34      ref={ref}
35      className={cn(
36        "group flex flex-1 items-center justify-between gap-4 px-5 py-4 text-left text-sm font-medium [&[data-state=open]>svg]:rotate-180",
37        focusRing,
38        className,
39      )}
40      {...props}
41    >
42      {children}
43      <ChevronDown className="size-4 shrink-0 text-current/50 transition-transform duration-200" />
44    </AccordionPrimitive.Trigger>
45  </AccordionPrimitive.Header>
46));
47AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
48 
49const AccordionContent = forwardRef<
50  React.ElementRef<typeof AccordionPrimitive.Content>,
51  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
52>(({ className, children, ...props }, ref) => (
53  <AccordionPrimitive.Content
54    ref={ref}
55    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
56    {...props}
57  >
58    <div className={cn("px-5 pb-4 text-current/70", className)}>{children}</div>
59  </AccordionPrimitive.Content>
60));
61AccordionContent.displayName = AccordionPrimitive.Content.displayName;
62 
63export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };