"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Progress } from "@/components/ui/progress"; import { Badge } from "@/components/ui/badge"; import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, UserIcon, SparklesIcon, SlidersHorizontalIcon, PartyPopperIcon, } from "lucide-react"; const steps = [ { label: "Welcome", icon: SparklesIcon }, { label: "Profile", icon: UserIcon }, { label: "Preferences", icon: SlidersHorizontalIcon }, { label: "Complete", icon: PartyPopperIcon }, ] as const; export default function OnboardingWizard() { const [currentStep, setCurrentStep] = React.useState(0); const [name, setName] = React.useState(""); const [darkMode, setDarkMode] = React.useState(false); const [emailNotifs, setEmailNotifs] = React.useState(true); const [weeklyDigest, setWeeklyDigest] = React.useState(true); const progressValue = ((currentStep + 1) / steps.length) * 100; const next = () => setCurrentStep((s) => Math.min(s + 1, steps.length - 1)); const prev = () => setCurrentStep((s) => Math.max(s - 1, 0)); return (

{/* Progress Indicator */}

{steps.map((step, i) => { const Icon = step.icon; const isActive = i === currentStep; const isComplete = i < currentStep; return (

{isComplete ? ( ) : ( )}

{step.label}

); })}

{/* Step Content */} {/* Step 1: Welcome */} {currentStep === 0 && ( <>

Welcome to UI Anvil Your forge for production-ready UI blocks. Let's set up your workspace in just a few quick steps. )} {/* Step 2: Profile */} {currentStep === 1 && ( <> Set up your profile Tell us a bit about yourself so we can personalize your experience.

Display Name ) => setName(e.target.value)} />

)} {/* Step 3: Preferences */} {currentStep === 2 && ( <> Your preferences Customize how UI Anvil works for you. You can change these later.

Dark mode

Use a darker color scheme.

Email notifications

Receive updates about new blocks.

Weekly digest

A summary of activity each week.

)} {/* Step 4: Complete */} {currentStep === 3 && ( <>

You're all set! Your workspace is ready. Start exploring the block gallery or jump straight into your dashboard.

Dark mode: {darkMode ? "On" : "Off"} Emails: {emailNotifs ? "On" : "Off"} Digest: {weeklyDigest ? "On" : "Off"}

)} {/* Navigation */} {currentStep > 0 && currentStep < steps.length - 1 && (

)}

); }

Block Gallery

Command Palette