"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { ArrowLeft, ArrowRight, Check, type LucideIcon } from "lucide-react"; import { useState } from "react"; interface Step { id: string; title: string; description?: string; icon?: LucideIcon; } interface Onboarding9Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; steps?: Step[]; currentStep?: number; labels?: { next?: string; back?: string; finish?: string; }; className?: string; } export const onboarding9Demo: Onboarding9Props = { badge: { label: "Quick Setup", variant: "secondary", }, heading: "Get started in minutes", steps: [ { id: "1", title: "Welcome aboard!", description: "We're excited to have you here. Let's get your account set up in just a few simple steps.", }, { id: "2", title: "Connect your tools", description: "Link your favorite apps and services to streamline your workflow and boost productivity.", }, { id: "3", title: "Customize your space", description: "Personalize your dashboard and settings to match your preferences and work style.", }, { id: "4", title: "You're all set!", description: "Congratulations! Your account is ready. Start exploring and make the most of your new workspace.", }, ], currentStep: 0, labels: { next: "Continue", back: "Back", finish: "Get Started", }, }; export function Onboarding9({ badge, heading, steps = [], currentStep: initialStep = 0, labels = {}, className, }: Onboarding9Props) { const [currentStep, setCurrentStep] = useState(initialStep); const { next: nextLabel, back: backLabel, finish: finishLabel } = labels; if (steps.length === 0) return null; const currentStepData = steps[currentStep]; const isLastStep = currentStep === steps.length - 1; const isFirstStep = currentStep === 0; const handleNext = () => { if (!isLastStep) { setCurrentStep((prev) => prev + 1); } }; const handleBack = () => { if (!isFirstStep) { setCurrentStep((prev) => prev - 1); } }; const handleFinish = () => { console.log("Onboarding completed!"); }; return (

{/* Header */}

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

{heading}

)}

{/* Step indicators */}

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

{isCompleted ? : index + 1}

); })}

{/* Content */}

{currentStepData?.title}

{currentStepData?.description}

{/* Navigation */}

{!isFirstStep && ( )}

); }