"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Check } from "lucide-react"; import Link from "next/link"; interface Task { id: string; title: string; completed: boolean; } interface ButtonConfig { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost"; } interface Onboarding12Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; tasks?: Task[]; labels?: { complete?: string; remaining?: string; }; buttons?: ButtonConfig[]; className?: string; } export const onboarding12Demo: Onboarding12Props = { badge: { label: "Progress", variant: "secondary", }, heading: "Complete your setup", description: "Finish these tasks to unlock all features.", tasks: [ { id: "1", title: "Create your account", completed: true }, { id: "2", title: "Verify email address", completed: true }, { id: "3", title: "Add profile picture", completed: true }, { id: "4", title: "Set up two-factor auth", completed: true }, { id: "5", title: "Connect payment method", completed: false }, { id: "6", title: "Invite team members", completed: false }, ], labels: { complete: "Complete", remaining: "remaining", }, buttons: [{ label: "Continue Setup", href: "#" }], }; function CircularProgress({ percentage, size = 160, strokeWidth = 12, }: { percentage: number; size?: number; strokeWidth?: number; }) { const radius = (size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const offset = circumference - (percentage / 100) * circumference; return (

{/* Center text */}

{percentage}%

); } export function Onboarding12({ badge, heading, description, tasks = [], labels = {}, buttons = [], className, }: Onboarding12Props) { const { complete: completeLabel, remaining: remainingLabel } = labels; const completedCount = tasks.filter((t) => t.completed).length; const totalCount = tasks.length; const percentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; const remainingCount = totalCount - completedCount; if (tasks.length === 0) return null; return (

{/* Header */}

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

{heading}

)} {description && (

{description}

)}

{/* Circular progress */}

{/* Stats */}

{completedCount}

{completeLabel}

{remainingCount}

{remainingLabel}

{/* Task list */}

{task.completed && }
{task.title}

{/* Buttons */} {buttons.length > 0 && (

{buttons.map((button, index) => ( ))}

)}

); }