'use client'; import { Card, CardContent, CardFooter, CardHeader } from '@/src/components/Card/Card'; import Checkbox from '@/src/components/Checkbox/Checkbox'; import Progress from '@/src/components/Progress/Progress'; import Button from '@/src/components/Button/Button'; import { useState } from 'react'; interface OnboardingTask { id: string; label: string; done: boolean; } const INITIAL_TASKS: OnboardingTask[] = [ { id: 'create-project', label: 'Create your first project', done: false }, { id: 'invite-teammate', label: 'Invite a teammate', done: false }, { id: 'connect-github', label: 'Connect your GitHub repo', done: false }, { id: 'customize-theme', label: 'Customize your theme', done: false }, { id: 'install-cli', label: 'Install the CLI', done: false }, ]; export default function OnboardingChecklist() { const [tasks, setTasks] = useState(INITIAL_TASKS); const completedCount = tasks.filter((task) => task.done).length; const allComplete = completedCount === tasks.length; const toggleTask = (id: string) => { setTasks((prev) => prev.map((task) => task.id === id ? { ...task, done: !task.done } : task)); }; return (

Get started with DaFink UI

Finish these steps to set up your workspace.

{completedCount} of {tasks.length} complete

{tasks.map((task) => (

toggleTask(task.id)} /> {task.label}

))} {completedCount} of {tasks.length} complete ); }

Onboarding checklist

Installation

Demo

Get started with DaFink UI