Add basic accordion element

2025-02-02 12:56:07 +01:00
parent 7142f0f8d5
commit 4abc78fff3
1 changed files with 44 additions and 0 deletions
@@ -0,0 +1,44 @@
+import { cn } from "@core/utils/cn.ts";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { type ComponentRef, forwardRef } from "react";
+
+export const Accordion = AccordionPrimitive.Root;
+
+export const AccordionHeader = AccordionPrimitive.Header;
+
+export const AccordionItem = AccordionPrimitive.Item;
+
+export const AccordionTrigger = forwardRef<
+  ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex justify-between items-center w-full p-4 border-b border-gray-200 dark:border-gray-800 group",
+      className,
+    )}
+    {...props}
+  >
+    {props.children}
+    <ChevronDownIcon
+      className="h-5 w-5 transition-transform duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden
+    />
+  </AccordionPrimitive.Trigger>
+));
+
+export const AccordionContent = forwardRef<
+  ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "p-4 border-b border-gray-200 dark:border-gray-800",
+      className,
+    )}
+    {...props}
+  />
+));