website refactor

apps/website/ui/Accordion.tsx

@@ -1,49 +1,40 @@
-
-
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { ReactNode } from 'react';
-import { Icon } from './Icon';
+import React, { ReactNode, useState } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Icon } from './Icon';
+import { Surface } from './primitives/Surface';
 
-interface AccordionProps {
+export interface AccordionProps {
   title: string;
-  icon: ReactNode;
   children: ReactNode;
-  isOpen: boolean;
-  onToggle: () => void;
+  defaultOpen?: boolean;
 }
 
-export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
+export const Accordion = ({ 
+  title, 
+  children, 
+  defaultOpen = false 
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
   return (
-    <Box border borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
-      <Box
-        as="button"
-        onClick={onToggle}
-        display="flex"
-        alignItems="center"
-        justifyContent="between"
-        px={3}
-        py={2}
-        fullWidth
-        hoverBg="iron-gray/50"
-        clickable
+    <Surface variant="muted" rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-4 py-3 hover:bg-white/5 transition-colors"
       >
-        <Stack direction="row" align="center" gap={2}>
-          {icon}
-          <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
-            {title}
-          </Text>
-        </Stack>
-        <Icon icon={isOpen ? ChevronDown : ChevronUp} size={4} color="text-gray-400" />
-      </Box>
+        <Text weight="bold" size="sm" variant="high">
+          {title}
+        </Text>
+        <Icon icon={isOpen ? ChevronUp : ChevronDown} size={4} intent="low" />
+      </button>
       
       {isOpen && (
-        <Box p={3} borderTop borderColor="border-charcoal-outline">
+        <Box padding={4} borderTop>
           {children}
         </Box>
       )}
-    </Box>
+    </Surface>
   );
-}
+};