Replaced collapsible with accordion

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+    return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+    className,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn("border-b last:border-b-0", className)}
+            {...props}
+        />
+    )
+}
+
+function AccordionTrigger({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon className="transition-transform duration-200 translate-y-0.5 pointer-events-none text-muted-foreground size-4 shrink-0" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    )
+}
+
+function AccordionContent({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            {...props}
+        >
+            <div className={cn("pt-0 pb-4", className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    )
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

src/components/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-    return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-    return (
-        <CollapsiblePrimitive.CollapsibleTrigger
-            data-slot="collapsible-trigger"
-            {...props}
-        />
-    )
-}
-
-function CollapsibleContent({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-    return (
-        <CollapsiblePrimitive.CollapsibleContent
-            data-slot="collapsible-content"
-            {...props}
-        />
-    )
-}
-
-export { Collapsible, CollapsibleContent, CollapsibleTrigger }