website refactor

apps/website/components/onboarding/OnboardingPrimaryActions.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
+import { Box } from '@/ui/Box';
+
+interface OnboardingPrimaryActionsProps {
+  onBack?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  isLastStep?: boolean;
+  canNext?: boolean;
+  isLoading?: boolean;
+  type?: 'button' | 'submit';
+}
+
+/**
+ * OnboardingPrimaryActions
+ * 
+ * Semantic component for the main navigation actions in the onboarding flow.
+ */
+export function OnboardingPrimaryActions({
+  onBack,
+  onNext,
+  nextLabel = 'Continue',
+  isLastStep = false,
+  canNext = true,
+  isLoading = false,
+  type = 'button',
+}: OnboardingPrimaryActionsProps) {
+  return (
+    <Stack direction="row" justify="between" mt={8} gap={4}>
+      {onBack ? (
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onBack}
+          disabled={isLoading}
+          icon={<Icon icon={ChevronLeft} size={4} />}
+        >
+          Back
+        </Button>
+      ) : (
+        <Box />
+      )}
+
+      <Button
+        type={type}
+        variant="primary"
+        onClick={onNext}
+        disabled={isLoading || !canNext}
+        w="40"
+      >
+        <Stack direction="row" align="center" gap={2}>
+          {isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}
+          {!isLoading && (isLastStep ? <Icon icon={Check} size={4} /> : <Icon icon={ChevronRight} size={4} />)}
+        </Stack>
+      </Button>
+    </Stack>
+  );
+}