accordion

1"use client"
2 
3import * as React from "react"
4import { Accordion as AccordionPrimitive } from "radix-ui"
5 
6import { cn } from "@/registry/bases/radix/lib/utils"
7import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
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", 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("not-last:border-b", 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-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 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",
46          className
47        )}
48        {...props}
49      >
50        {children}
51        <IconPlaceholder
52          lucide="ChevronDownIcon"
53          tabler="IconChevronDown"
54          data-slot="accordion-trigger-icon"
55          hugeicons="ArrowDown01Icon"
56          phosphor="CaretDownIcon"
57          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
58        />
59        <IconPlaceholder
60          lucide="ChevronUpIcon"
61          tabler="IconChevronUp"
62          data-slot="accordion-trigger-icon"
63          hugeicons="ArrowUp01Icon"
64          phosphor="CaretUpIcon"
65          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
66        />
67      </AccordionPrimitive.Trigger>
68    </AccordionPrimitive.Header>
69  )
70}
71 
72function AccordionContent({
73  className,
74  children,
75  ...props
76}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
77  return (
78// … truncated