'use client'; import { IconArchive, IconChevronRight, IconCircleCheckFilled, IconCircleDashed, IconDots, IconMail, } from '@tabler/icons-react'; import { useState } from 'react'; import { Button, buttonVariants } from '@/components/ui/button'; import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { cn } from '@/lib/utils'; const steps = [ { id: 'profile', title: 'Complete your profile', description: 'Add your name, photo, and role so your team knows who you are.', completed: true, actionLabel: 'Edit profile', actionHref: '#', }, { id: 'workspace', title: 'Set up your workspace', description: 'Customize your workspace with a name, icon, and default settings.', completed: false, actionLabel: 'Configure workspace', actionHref: '#', }, { id: 'invite', title: 'Invite your team', description: 'Bring your teammates on board so you can collaborate in real time.', completed: false, actionLabel: 'Send invites', actionHref: '#', }, { id: 'integrations', title: 'Connect integrations', description: 'Link your favorite tools like Slack, GitHub, and Linear to streamline workflows.', completed: false, actionLabel: 'Browse integrations', actionHref: '#', }, { id: 'workflow', title: 'Create your first workflow', description: 'Automate a repetitive task with a simple drag-and-drop workflow builder.', completed: false, actionLabel: 'Build workflow', actionHref: '#', }, { id: 'notifications', title: 'Set up notifications', description: 'Choose how and when you want to be notified about updates and mentions.', completed: false, actionLabel: 'Manage notifications', actionHref: '#', }, ]; interface OnboardingStep { id: string; title: string; description: string; completed: boolean; actionLabel: string; actionHref: string; } function CircularProgress({ completed, total, }: { completed: number; total: number; }) { const progress = total > 0 ? ((total - completed) / total) * 100 : 0; const strokeDashoffset = 100 - progress; return ( ); } function StepIndicator({ completed }: { completed: boolean }) { if (completed) { return ( ); } return ( ); } export function Onboarding01() { const [currentSteps, setCurrentSteps] = useState(steps); const [openStepId, setOpenStepId] = useState(() => { const firstIncomplete = steps.find((s) => !s.completed); return firstIncomplete?.id ?? steps[0]?.id ?? null; }); const [dismissed, setDismissed] = useState(false); const completedCount = currentSteps.filter((s) => s.completed).length; const remainingCount = currentSteps.length - completedCount; const handleStepClick = (stepId: string) => { setOpenStepId(openStepId === stepId ? null : stepId); }; const handleStepAction = (step: OnboardingStep) => { const updated = currentSteps.map((s) => s.id === step.id ? { ...s, completed: true } : s ); setCurrentSteps(updated); const nextIncomplete = updated.find((s) => !s.completed); setOpenStepId(nextIncomplete?.id ?? null); }; if (dismissed) { return (

Checklist dismissed

); } return (

Get started with Acme

{completedCount} {' / '} {currentSteps.length} {' '} completed

} > setDismissed(true)}> window.open('mailto:support@acme.com?subject=Feedback') } >

{currentSteps.map((step, index) => { const isOpen = openStepId === step.id; const isFirst = index === 0; const prevStep = currentSteps[index - 1]; const isPrevOpen = prevStep && openStepId === prevStep.id; const showBorderTop = !(isFirst || isOpen || isPrevOpen); return (

handleStepClick(step.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleStepClick(step.id); } }} role="button" tabIndex={0} >

{step.title}

{step.description}

{ e.stopPropagation(); handleStepAction(step); }} > {step.actionLabel}

{!isOpen && (

); })}

); }