website refactor

apps/website/ui/StepIndicator.tsx

@@ -1,65 +1,63 @@
-import { User, Camera, Check } from 'lucide-react';
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Check } from 'lucide-react';
+import { Icon } from './Icon';
 
-interface Step {
-  id: number;
+export interface Step {
+  id: string;
   label: string;
-  icon: React.ElementType;
 }
 
-interface StepIndicatorProps {
-  currentStep: number;
-  steps?: Step[];
+export interface StepIndicatorProps {
+  steps: Step[];
+  currentStepId: string;
+  completedStepIds: string[];
 }
 
-const DEFAULT_STEPS: Step[] = [
-  { id: 1, label: 'Personal', icon: User },
-  { id: 2, label: 'Avatar', icon: Camera },
-];
-
-export function StepIndicator({ currentStep, steps = DEFAULT_STEPS }: StepIndicatorProps) {
+export const StepIndicator = ({ 
+  steps, 
+  currentStepId, 
+  completedStepIds 
+}: StepIndicatorProps) => {
   return (
-    <div className="flex items-center justify-center gap-2 mb-8">
+    <Box display="flex" alignItems="center" gap={4}>
       {steps.map((step, index) => {
-        const Icon = step.icon;
-        const isCompleted = step.id < currentStep;
-        const isCurrent = step.id === currentStep;
+        const isCurrent = step.id === currentStepId;
+        const isCompleted = completedStepIds.includes(step.id);
+        const isLast = index === steps.length - 1;
 
         return (
-          <div key={step.id} className="flex items-center">
-            <div className="flex flex-col items-center">
-              <div
-                className={`flex h-12 w-12 items-center justify-center rounded-full transition-all duration-300 ${
-                  isCurrent
-                    ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/30'
-                    : isCompleted
-                    ? 'bg-performance-green text-white'
-                    : 'bg-iron-gray border border-charcoal-outline text-gray-500'
-                }`}
+          <React.Fragment key={step.id}>
+            <Box display="flex" alignItems="center" gap={2}>
+              <Box 
+                width="2rem" 
+                height="2rem" 
+                display="flex" 
+                alignItems="center" 
+                justifyContent="center" 
+                rounded="full"
+                bg={isCompleted ? 'var(--ui-color-intent-success)' : isCurrent ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
+                style={{ border: isCurrent ? '2px solid var(--ui-color-intent-primary)' : 'none' }}
               >
                 {isCompleted ? (
-                  <Check className="w-5 h-5" />
+                  <Icon icon={Check} size={4} intent="high" />
                 ) : (
-                  <Icon className="w-5 h-5" />
+                  <Text size="xs" weight="bold" variant={isCurrent ? 'high' : 'low'}>
+                    {index + 1}
+                  </Text>
                 )}
-              </div>
-              <span
-                className={`mt-2 text-xs font-medium ${
-                  isCurrent ? 'text-white' : isCompleted ? 'text-performance-green' : 'text-gray-500'
-                }`}
-              >
+              </Box>
+              <Text size="sm" weight={isCurrent ? 'bold' : 'medium'} variant={isCurrent ? 'high' : 'low'}>
                 {step.label}
-              </span>
-            </div>
-            {index < steps.length - 1 && (
-              <div
-                className={`w-16 h-0.5 mx-4 mt-[-20px] ${
-                  isCompleted ? 'bg-performance-green' : 'bg-charcoal-outline'
-                }`}
-              />
+              </Text>
+            </Box>
+            {!isLast && (
+              <Box flex={1} height="2px" bg="var(--ui-color-border-muted)" minWidth="2rem" />
             )}
-          </div>
+          </React.Fragment>
         );
       })}
-    </div>
+    </Box>
   );
-}
+};