"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; import Link from "next/link"; interface Task { id: string; title: string; completed: boolean; } interface Onboarding7Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; tasks?: Task[]; progressLabel?: string; primaryButton?: { label: string; href: string; }; secondaryButton?: { label: string; href: string; }; className?: string; } export const onboarding7Demo: Onboarding7Props = { badge: { label: "Progress", variant: "secondary", }, heading: "You're almost there!", description: "Complete these tasks to finish setting up your account.", tasks: [ { id: "1", title: "Create your account", completed: true }, { id: "2", title: "Verify your email", completed: true }, { id: "3", title: "Complete your profile", completed: true }, { id: "4", title: "Connect your calendar", completed: false }, { id: "5", title: "Invite team members", completed: false }, ], progressLabel: "Setup Progress", primaryButton: { label: "Continue", href: "https://beste.co", }, secondaryButton: { label: "Finish later", href: "https://beste.co", }, }; export function Onboarding7({ badge, heading, description, tasks = [], progressLabel, primaryButton, secondaryButton, className, }: Onboarding7Props) { const completedCount = tasks.filter((t) => t.completed).length; const totalCount = tasks.length; const percentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; if (tasks.length === 0) return null; return (

{/* Header */}

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

{heading}

)} {description && (

{description}

)}

{/* Progress section */}

{progressLabel && ( {progressLabel} )} {completedCount} of {totalCount} completed

{percentage}%

{/* Task list */}

{tasks.map((task) => (

{task.completed && ( )}

{task.title}

))}

{/* Buttons */}

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

); }