"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Check, type LucideIcon } from "lucide-react"; import Link from "next/link"; interface TimelineStep { id: string; title: string; description?: string; icon?: LucideIcon; } interface Onboarding6Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; steps?: TimelineStep[]; currentStep?: number; primaryButton?: { label: string; href: string; }; secondaryButton?: { label: string; href: string; }; className?: string; } export const onboarding6Demo: Onboarding6Props = { badge: { label: "Getting Started", variant: "secondary", }, heading: "Set up your workspace", description: "Complete these steps to start collaborating with your team.", steps: [ { id: "1", title: "Create your account", description: "Sign up with your work email to get started.", }, { id: "2", title: "Invite team members", description: "Add colleagues to collaborate on projects together.", }, { id: "3", title: "Set up your first project", description: "Create a project and organize your work.", }, { id: "4", title: "Connect integrations", description: "Link your favorite tools for seamless workflow.", }, { id: "5", title: "Start collaborating", description: "You're all set! Begin working with your team.", }, ], currentStep: 2, primaryButton: { label: "Continue Setup", href: "https://beste.co", }, secondaryButton: { label: "Skip for now", href: "https://beste.co", }, }; export function Onboarding6({ badge, heading, description, steps = [], currentStep = 0, primaryButton, secondaryButton, className, }: Onboarding6Props) { if (steps.length === 0) return null; return (

{/* Header */}

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

{heading}

)} {description && (

{description}

)}

{/* Timeline */}

{steps.map((step, index) => { const isCompleted = index < currentStep; const isCurrent = index === currentStep; const isLast = index === steps.length - 1; const Icon = step.icon; return (

{/* Vertical line */} {!isLast && (

)} {/* Step indicator */}

{isCompleted ? ( ) : Icon ? ( ) : ( {index + 1} )}

{/* Content */}

{step.title}

{step.description && (

{step.description}

)}

); })}

{/* Buttons */}

{primaryButton && ( )} {secondaryButton && ( )}

); }