"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; import { Check, type LucideIcon } from "lucide-react"; import { useState } from "react"; interface NavStep { id: string; title: string; description?: string; icon?: LucideIcon; content: React.ReactNode; } interface Onboarding11Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; steps?: NavStep[]; initialStep?: number; labels?: { next?: string; back?: string; finish?: string; }; onStepComplete?: (stepIndex: number, stepId: string) => void; onFinish?: () => void; className?: string; } export const onboarding11Demo: Onboarding11Props = { badge: { label: "Setup", variant: "secondary", }, heading: "Account Setup", steps: [ { id: "1", title: "Profile", description: "Basic info", content: (

Complete your profile

Add your personal details to help us personalize your experience.

Name

), }, { id: "2", title: "Workspace", description: "Team settings", content: (

Set up your workspace

Configure your team workspace and invite collaborators.

Workspace Name

), }, { id: "3", title: "Integrations", description: "Connect apps", content: (

Connect your tools

Link your favorite apps to streamline your workflow.

Slack

Messaging

GitHub

Development

), }, { id: "4", title: "Finish", description: "All done", content: (

You're all set!

Your account is ready. Start exploring your new workspace.

), }, ], initialStep: 0, labels: { next: "Continue", back: "Back", finish: "Get Started", }, onStepComplete: (stepIndex, stepId) => { console.log(`Step ${stepIndex + 1} (${stepId}) completed`); }, onFinish: () => { console.log("Onboarding finished!"); }, }; export function Onboarding11({ badge, heading, steps = [], initialStep = 0, labels = {}, onStepComplete, onFinish, className, }: Onboarding11Props) { const { next: nextLabel, back: backLabel, finish: finishLabel } = labels; const [currentStep, setCurrentStep] = useState(initialStep); const [completedSteps, setCompletedSteps] = useState>( () => new Set(Array.from({ length: initialStep }, (_, i) => i)) ); if (steps.length === 0) return null; const currentStepData = steps[currentStep]; const isLastStep = currentStep === steps.length - 1; const isFirstStep = currentStep === 0; const handleNext = () => { const stepId = steps[currentStep]?.id ?? ""; onStepComplete?.(currentStep, stepId); setCompletedSteps((prev) => new Set([...prev, currentStep])); if (isLastStep) { onFinish?.(); } else { setCurrentStep((prev) => prev + 1); } }; const handleBack = () => { if (!isFirstStep) { setCurrentStep((prev) => prev - 1); } }; const handleStepClick = (index: number) => { // Can navigate to completed steps or current step if (index <= currentStep || completedSteps.has(index)) { setCurrentStep(index); } }; return (

{/* Header */}

{badge && ( {badge.label} )} {heading && (

{heading}

)}

{/* Mobile progress indicator */}

{currentStepData?.title}

{steps.map((step, index) => { const isCompleted = completedSteps.has(index); const isCurrent = index === currentStep; return (

Step {currentStep + 1} of {steps.length}

{/* Side navigation - Desktop only */}

{/* Content area */}

{currentStepData?.content}

{/* Navigation buttons */}

{!isFirstStep ? ( ) : (

)}

); }