website refactor

apps/website/ui/SegmentedControl.tsx

@@ -1,5 +1,3 @@
-
-
 import { Box } from './primitives/Box';
 import { Stack } from './primitives/Stack';
 import { Text } from './Text';
@@ -29,7 +27,16 @@ export function SegmentedControl({
   };
 
   return (
-    <Box style={{ display: 'inline-flex', width: '100%', flexWrap: 'wrap', gap: '0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(38, 38, 38, 0.6)', padding: '0.25rem' }}>
+    <Stack 
+      direction="row" 
+      display="inline-flex" 
+      w="full" 
+      flexWrap="wrap" 
+      gap={2} 
+      rounded="full" 
+      bg="bg-black/60" 
+      p={1}
+    >
       {options.map((option) => {
         const isSelected = option.value === value;
         
@@ -41,24 +48,28 @@ export function SegmentedControl({
             onClick={() => handleSelect(option.value, option.disabled)}
             aria-pressed={isSelected}
             disabled={option.disabled}
-            style={{ 
-              flex: 1, 
-              minWidth: '140px', 
-              padding: '0.375rem 0.75rem', 
-              borderRadius: '9999px', 
-              transition: 'all 0.2s', 
-              textAlign: 'left',
-              backgroundColor: isSelected ? '#3b82f6' : 'transparent',
-              color: isSelected ? 'white' : '#d1d5db',
-              opacity: option.disabled ? 0.5 : 1,
-              cursor: option.disabled ? 'not-allowed' : 'pointer',
-              border: 'none'
-            }}
+            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"
           >
             <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'} style={{ fontSize: '10px', opacity: isSelected ? 0.8 : 1 }}>
+                <Text 
+                  size="xs" 
+                  color={isSelected ? 'text-white' : 'text-gray-400'} 
+                  fontSize="10px" 
+                  opacity={isSelected ? 0.8 : 1}
+                >
                   {option.description}
                 </Text>
               )}
@@ -66,6 +77,6 @@ export function SegmentedControl({
           </Box>
         );
       })}
-    </Box>
+    </Stack>
   );
 }