website refactor

apps/website/ui/SegmentedControl.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface SegmentedControlOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onChange?: (value: string) => void;
+}
+
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+}: SegmentedControlProps) {
+  const handleSelect = (optionValue: string, optionDisabled?: boolean) => {
+    if (!onChange || optionDisabled) return;
+    if (optionValue === value) return;
+    onChange(optionValue);
+  };
+
+  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' }}>
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        
+        return (
+          <Box
+            key={option.value}
+            as="button"
+            type="button"
+            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'
+            }}
+          >
+            <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 }}>
+                  {option.description}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}