dev setup

apps/website/components/dev/Accordion.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ReactNode, useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+interface AccordionProps {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function Accordion({ title, icon, children, defaultOpen = false }: AccordionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border border-charcoal-outline rounded-lg overflow-hidden bg-iron-gray/30">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-3 py-2 hover:bg-iron-gray/50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          {icon}
+          <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+            {title}
+          </span>
+        </div>
+        {isOpen ? (
+          <ChevronDown className="w-4 h-4 text-gray-400" />
+        ) : (
+          <ChevronUp className="w-4 h-4 text-gray-400" />
+        )}
+      </button>
+      
+      {isOpen && (
+        <div className="p-3 border-t border-charcoal-outline">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}