feat(onboarding): add stepper, contextual preview and shell

2026-07-14 11:16:13 +02:00 · 2026-06-16 16:39:54 +02:00
parent 35654feedd
commit 6098c2fe42
5 changed files with 181 additions and 7 deletions
@@ -0,0 +1,50 @@
+"use client";
+
+import { useOnboarding } from "@onboardjs/react";
+import { Button } from "@/components/ui/button";
+import { OnboardingStepper } from "@/features/onboarding/onboarding-stepper";
+import { OnboardingPreview } from "@/features/onboarding/onboarding-preview";
+
+export const OnboardingShell = () => {
+    const { state, previous, skip, renderStep } = useOnboarding();
+
+    if (!state) return null;
+
+    const showSplit = state.currentStep?.id !== "agent-waiting" && state.currentStep?.id !== "finish";
+
+    return (
+        <div className="min-h-screen bg-zinc-950 text-white flex items-center justify-center p-4">
+            <div className="w-full max-w-4xl rounded-2xl bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[560px]">
+                <div className="flex-1 flex flex-col gap-6 p-8">
+                    <OnboardingStepper />
+                    <div className="flex-1">{renderStep()}</div>
+                    <div className="flex justify-between">
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => previous()}
+                            disabled={state.isFirstStep || state.isLoading}
+                        >
+                            Back
+                        </Button>
+                        {state.isSkippable && (
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                onClick={() => skip()}
+                                disabled={state.isLoading}
+                            >
+                                Skip
+                            </Button>
+                        )}
+                    </div>
+                </div>
+                {showSplit && (
+                    <div className="hidden md:block w-[360px] border-l border-white/10 bg-zinc-950">
+                        <OnboardingPreview />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};