"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Check, ChevronDown } from "lucide-react"; import { useState } from "react"; interface AccordionStep { id: string; title: string; description?: string; content: React.ReactNode; } interface Onboarding10Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; steps?: AccordionStep[]; completedSteps?: string[]; primaryButton?: { label: string; href: string; }; className?: string; } export const onboarding10Demo: Onboarding10Props = { badge: { label: "Setup Guide", variant: "secondary", }, heading: "Complete your setup", description: "Expand each step to learn more and complete the action.", steps: [ { id: "1", title: "Create your profile", description: "Add your personal information", content: (

Start by adding your name, profile picture, and a short bio. This helps others recognize you and understand your role.

), }, { id: "2", title: "Connect your calendar", description: "Sync your schedule for better planning", content: (

Connect your Google Calendar or Outlook to automatically sync events and manage your availability.

), }, { id: "3", title: "Invite team members", description: "Bring your team onboard", content: (

Send invites to your colleagues so you can start collaborating together. You can invite up to 10 team members.

), }, { id: "4", title: "Set up notifications", description: "Choose how you want to be notified", content: (

Configure your notification preferences for email, push, and in-app alerts. Stay informed without being overwhelmed.

), }, ], completedSteps: ["1"], primaryButton: { label: "Continue to Dashboard", href: "https://beste.co", }, }; export function Onboarding10({ badge, heading, description, steps = [], completedSteps = [], primaryButton, className, }: Onboarding10Props) { const [openSteps, setOpenSteps] = useState([steps[0]?.id ?? ""]); const toggleStep = (stepId: string) => { setOpenSteps((prev) => prev.includes(stepId) ? prev.filter((id) => id !== stepId) : [...prev, stepId] ); }; if (steps.length === 0) return null; const completedCount = completedSteps.length; const totalCount = steps.length; return (

{/* Header */}

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

{heading}

)} {description && (

{description}

)}

{completedCount} of {totalCount} completed

{/* Accordion steps */}

{steps.map((step, index) => { const isCompleted = completedSteps.includes(step.id); const isOpen = openSteps.includes(step.id); return (

{/* Header */} {/* Content */} {isOpen && (

{step.content}

)}

); })}

{/* Primary button */} {primaryButton && (

)}

); }

{heading}

{step.title}