Onboarding

1'use client';
2 
3import {
4  IconArchive,
5  IconChevronRight,
6  IconCircleCheckFilled,
7  IconCircleDashed,
8  IconDots,
9  IconMail,
10} from '@tabler/icons-react';
11import { useState } from 'react';
12import { Button, buttonVariants } from '@/components/ui/button';
13import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
14import {
15  DropdownMenu,
16  DropdownMenuContent,
17  DropdownMenuItem,
18  DropdownMenuTrigger,
19} from '@/components/ui/dropdown-menu';
20import { cn } from '@/lib/utils';
21 
22const steps = [
23  {
24    id: 'profile',
25    title: 'Complete your profile',
26    description:
27      'Add your name, photo, and role so your team knows who you are.',
28    completed: true,
29    actionLabel: 'Edit profile',
30    actionHref: '#',
31  },
32  {
33    id: 'workspace',
34    title: 'Set up your workspace',
35    description:
36      'Customize your workspace with a name, icon, and default settings.',
37    completed: false,
38    actionLabel: 'Configure workspace',
39    actionHref: '#',
40  },
41  {
42    id: 'invite',
43    title: 'Invite your team',
44    description:
45      'Bring your teammates on board so you can collaborate in real time.',
46    completed: false,
47    actionLabel: 'Send invites',
48    actionHref: '#',
49  },
50  {
51    id: 'integrations',
52    title: 'Connect integrations',
53    description:
54      'Link your favorite tools like Slack, GitHub, and Linear to streamline workflows.',
55    completed: false,
56    actionLabel: 'Browse integrations',
57    actionHref: '#',
58  },
59  {
60    id: 'workflow',
61    title: 'Create your first workflow',
62    description:
63      'Automate a repetitive task with a simple drag-and-drop workflow builder.',
64    completed: false,
65    actionLabel: 'Build workflow',
66    actionHref: '#',
67  },
68  {
69    id: 'notifications',
70    title: 'Set up notifications',
71    description:
72      'Choose how and when you want to be notified about updates and mentions.',
73    completed: false,
74    actionLabel: 'Manage notifications',
75    actionHref: '#',
76  },
77];
78 
79interface OnboardingStep {
80  id: string;
81  title: string;
82  description: string;
83  completed: boolean;
84  actionLabel: string;
85  actionHref: string;
86}
87 
88function CircularProgress({
89  completed,
90  total,
91}: {
92  completed: number;
93  total: number;
94}) {
95  const progress = total > 0 ? ((total - completed) / total) * 100 : 0;
96  const strokeDashoffset = 100 - progress;
97 
98  return (
99    <svg className="-rotate-90" height="14" viewBox="0 0 14 14" width="14">
100      <circle
101        className="stroke-muted"
102        cx="7"
103// … truncated