website refactor

apps/website/ui/SegmentedControl.tsx

@@ -1,82 +1,52 @@
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
 
-interface SegmentedControlOption {
-  value: string;
+export interface SegmentedControlOption {
+  id: string;
   label: string;
-  description?: string;
-  disabled?: boolean;
+  icon?: React.ReactNode;
 }
 
-interface SegmentedControlProps {
+export interface SegmentedControlProps {
   options: SegmentedControlOption[];
-  value: string;
-  onChange?: (value: string) => void;
+  activeId: string;
+  onChange: (id: string) => void;
+  fullWidth?: boolean;
 }
 
-export function SegmentedControl({
-  options,
-  value,
+export const SegmentedControl = ({ 
+  options, 
+  activeId, 
   onChange,
-}: SegmentedControlProps) {
-  const handleSelect = (optionValue: string, optionDisabled?: boolean) => {
-    if (!onChange || optionDisabled) return;
-    if (optionValue === value) return;
-    onChange(optionValue);
-  };
-
+  fullWidth = false 
+}: SegmentedControlProps) => {
   return (
-    <Stack 
-      direction="row" 
+    <Surface 
+      variant="muted" 
+      rounded="lg" 
+      padding={1} 
       display="inline-flex" 
-      w="full" 
-      flexWrap="wrap" 
-      gap={2} 
-      rounded="full" 
-      bg="bg-black/60" 
-      p={1}
+      width={fullWidth ? '100%' : undefined}
     >
       {options.map((option) => {
-        const isSelected = option.value === value;
-        
+        const isSelected = option.id === activeId;
         return (
-          <Box
-            key={option.value}
-            as="button"
-            type="button"
-            onClick={() => handleSelect(option.value, option.disabled)}
-            aria-pressed={isSelected}
-            disabled={option.disabled}
-            flex={1}
-            minWidth="140px"
-            px={3}
-            py={1.5}
-            rounded="full"
-            transition="all 0.2s"
-            textAlign="left"
-            bg={isSelected ? 'bg-primary-blue' : 'transparent'}
-            color={isSelected ? 'text-white' : 'text-gray-400'}
-            opacity={option.disabled ? 0.5 : 1}
-            cursor={option.disabled ? 'not-allowed' : 'pointer'}
-            border="none"
+          <button
+            key={option.id}
+            onClick={() => onChange(option.id)}
+            className={`flex-1 flex items-center justify-center gap-2 px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all rounded-md ${
+              isSelected 
+                ? 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] shadow-sm' 
+                : 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
+            }`}
           >
-            <Stack gap={0.5}>
-              <Text size="xs" weight="medium" color="inherit">{option.label}</Text>
-              {option.description && (
-                <Text 
-                  size="xs" 
-                  color={isSelected ? 'text-white' : 'text-gray-400'} 
-                  fontSize="10px" 
-                  opacity={isSelected ? 0.8 : 1}
-                >
-                  {option.description}
-                </Text>
-              )}
-            </Stack>
-          </Box>
+            {option.icon}
+            {option.label}
+          </button>
         );
       })}
-    </Stack>
+    </Surface>
   );
-}
+};