website refactor

apps/website/ui/Accordion.tsx

@@ -9,19 +9,35 @@ export interface AccordionProps {
   title: string;
   children: ReactNode;
   defaultOpen?: boolean;
+  isOpen?: boolean;
+  onToggle?: () => void;
 }
 
 export const Accordion = ({ 
   title, 
   children, 
-  defaultOpen = false 
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onToggle
 }: AccordionProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen);
+  
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    }
+    if (!isControlled) {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
 
   return (
     <Surface variant="muted" rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
       <button
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={handleToggle}
         className="w-full flex items-center justify-between px-4 py-3 hover:bg-white/5 transition-colors"
       >
         <Text weight="bold" size="sm" variant="high">