Refine portfolio styling tokens

Author: zubinqayam

components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<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<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 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all 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 };

lib/utils.ts

@@ -0,0 +1,42 @@
+export type ClassValue = string | number | null | false | undefined | ClassDictionary | ClassArray;
+
+interface ClassDictionary {
+  [key: string]: any;
+}
+
+interface ClassArray extends Array<ClassValue> {}
+
+function toVal(mix: ClassValue): string {
+  let str = '';
+  if (typeof mix === 'string' || typeof mix === 'number') {
+    str += mix;
+  } else if (Array.isArray(mix)) {
+    for (const item of mix) {
+      const val = toVal(item);
+      if (val) {
+        if (str) str += ' ';
+        str += val;
+      }
+    }
+  } else if (mix && typeof mix === 'object') {
+    for (const key in mix as ClassDictionary) {
+      if ((mix as ClassDictionary)[key]) {
+        if (str) str += ' ';
+        str += key;
+      }
+    }
+  }
+  return str;
+}
+
+export function cn(...inputs: ClassValue[]): string {
+  let str = '';
+  for (const input of inputs) {
+    const val = toVal(input);
+    if (val) {
+      if (str) str += ' ';
+      str += val;
+    }
+  }
+  return str;
+}