Onboarding Workspace Setup

1'use client';
2 
3import type { Icon } from '@tabler/icons-react';
4import {
5  IconCircleCheckFilled,
6  IconFolder,
7  IconPlug,
8  IconRocket,
9  IconUsers,
10} from '@tabler/icons-react';
11import { useState } from 'react';
12import { Button } from '@/components/ui/button';
13import { cn } from '@/lib/utils';
14 
15interface StepData {
16  title: string;
17  description: string;
18  icon: Icon;
19  actionLabel: string;
20}
21 
22const steps: StepData[] = [
23  {
24    title: 'Create your workspace',
25    description:
26      'Name your workspace and pick a URL. This is where your team will collaborate on everything.',
27    icon: IconRocket,
28    actionLabel: 'Get started',
29  },
30  {
31    title: 'Invite your team',
32    description:
33      'Add teammates by email so everyone can collaborate in real time across projects.',
34    icon: IconUsers,
35    actionLabel: 'Send invites',
36  },
37  {
38    title: 'Set up your first project',
39    description:
40      'Create a project to organize tasks, docs, and milestones all in one place.',
41    icon: IconFolder,
42    actionLabel: 'Create project',
43  },
44  {
45    title: 'Connect your tools',
46    description:
47      'Link Slack, GitHub, or Figma to keep your workflow in sync automatically.',
48    icon: IconPlug,
49    actionLabel: 'Browse integrations',
50  },
51];
52 
53function getIconColor(isCompleted: boolean, isActive: boolean) {
54  if (isCompleted) {
55    return 'text-muted-foreground/30';
56  }
57  if (isActive) {
58    return 'text-primary';
59  }
60  return 'text-muted-foreground/40';
61}
62 
63function getTitleClass(isCompleted: boolean, isActive: boolean) {
64  if (isCompleted) {
65    return 'text-muted-foreground/50 line-through';
66  }
67  if (isActive) {
68    return 'text-foreground';
69  }
70  return 'text-muted-foreground';
71}
72 
73function StepIndicator({
74  index,
75  isCompleted,
76  isActive,
77}: {
78  index: number;
79  isCompleted: boolean;
80  isActive: boolean;
81}) {
82  if (isCompleted) {
83    return (
84      <div className="flex size-7 items-center justify-center">
85        <IconCircleCheckFilled
86          aria-hidden="true"
87          className="size-7 text-emerald-500"
88        />
89      </div>
90    );
91  }
92  return (
93    <div
94      className={cn(
95        'flex size-7 items-center justify-center rounded-full font-semibold text-xs',
96        isActive
97          ? 'bg-primary text-primary-foreground'
98          : 'bg-muted text-muted-foreground'
99      )}
100    >
101      {index + 1}
102    </div>
103  );
104}
105 
106function StepCard({
107  step,
108  index,
109  isCompleted,
110  isActive,
111  onComplete,
112}: {
113  step: StepData;
114  index: number;
115// … truncated