feat: add accordion components

karrioapi · Dec 16, 2024 · de0b894 · de0b894
1 parent 8561081
commit de0b894
Show file tree

Hide file tree

Showing 5 changed files with 280 additions and 10 deletions.
diff --git a/ee/platform b/ee/platform
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/insiders/components/ui/accordion.tsx b/packages/insiders/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "@karrio/insiders/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef</* @once */ typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef</* @once */ typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef</* @once */ typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/insiders/package.json b/packages/insiders/package.json
@@ -14,6 +14,7 @@
     "@karrio/types": "*",
     "@nivo/bar": "^0.87.0",
     "@nivo/line": "^0.87.0",
+    "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.1",

diff --git a/packages/insiders/tailwind.config.ts b/packages/insiders/tailwind.config.ts
@@ -15,8 +15,14 @@ const config: Config = {
   			base: '14px'
   		},
   		fontFamily: {
-  			heading: ["var(--font-heading)", ...fontFamily.sans],
-  			body: ["var(--font-body)", ...fontFamily.sans]
+  			heading: [
+  				'var(--font-heading)',
+                    ...fontFamily.sans
+                ],
+  			body: [
+  				'var(--font-body)',
+                    ...fontFamily.sans
+                ]
   		},
   		colors: {
   			border: 'hsl(var(--border))',