website refactor

apps/website/components/onboarding/OnboardingCTA.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+
+interface OnboardingCTAProps {
+  onBack?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  backLabel?: string;
+  isLastStep?: boolean;
+  canNext?: boolean;
+  isLoading?: boolean;
+  type?: 'button' | 'submit';
+}
+
+export function OnboardingCTA({
+  onBack,
+  onNext,
+  nextLabel = 'Continue',
+  backLabel = 'Back',
+  isLastStep = false,
+  canNext = true,
+  isLoading = false,
+  type = 'button',
+}: OnboardingCTAProps) {
+  return (
+    <Stack direction="row" justify="between" mt={8} gap={4}>
+      {onBack ? (
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onBack}
+          disabled={isLoading}
+          className="px-8"
+        >
+          {backLabel}
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <Button
+        type={type}
+        variant="primary"
+        onClick={onNext}
+        disabled={isLoading || !canNext}
+        className="px-8 min-w-[140px]"
+      >
+        {isLoading ? (
+          <Stack direction="row" gap={2} align="center">
+            <span className="animate-spin">⟳</span>
+            <span>Processing...</span>
+          </Stack>
+        ) : (
+          isLastStep ? 'Complete Setup' : nextLabel
+        )}
+      </Button>
+    </Stack>
+  );
+}