Accordion

1"use client"
2 
3import * as React from "react"
4import { Accordion as AccordionPrimitive } from "radix-ui"
5 
6import { cn } from "@/lib/utils"
7import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
8 
9function Accordion({
10  className,
11  ...props
12}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
13  return (
14    <AccordionPrimitive.Root
15      data-slot="accordion"
16      className={cn("flex w-full flex-col gap-2", className)}
17      {...props}
18    />
19  )
20}
21 
22function AccordionItem({
23  className,
24  ...props
25}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
26  return (
27    <AccordionPrimitive.Item
28      data-slot="accordion-item"
29      className={cn("rounded-none", className)}
30      {...props}
31    />
32  )
33}
34 
35function AccordionTrigger({
36  className,
37  children,
38  ...props
39}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
40  return (
41    <AccordionPrimitive.Header className="flex">
42      <AccordionPrimitive.Trigger
43        data-slot="accordion-trigger"
44        className={cn(
45          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-treasury-ink rounded-none bg-treasury-base-lightest px-4 py-3.5 text-left text-lg font-bold hover:bg-treasury-base-light focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-6 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
46          className
47        )}
48        {...props}
49      >
50        {children}
51        <ChevronDownIcon data-slot="accordion-trigger-icon" strokeWidth={3} className="pointer-events-none shrink-0 transition-transform duration-200" />
52      </AccordionPrimitive.Trigger>
53    </AccordionPrimitive.Header>
54  )
55}
56 
57function AccordionContent({
58  className,
59  children,
60  ...props
61}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
62  return (
63    <AccordionPrimitive.Content
64      data-slot="accordion-content"
65      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden bg-treasury-paper"
66      {...props}
67    >
68      <div
69        className={cn(
70          "px-4 pb-4 pt-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4 text-base",
71          className
72        )}
73      >
74        {children}
75      </div>
76// … truncated