Onboarding Steps with Progress

1'use client';
2 
3import { IconCircleCheckFilled } from '@tabler/icons-react';
4import { useState } from 'react';
5import { Progress } from '@/components/ui/progress';
6import { cn } from '@/lib/utils';
7 
8const steps = [
9  {
10    id: '1.',
11    title: 'Create your store',
12    description:
13      "Choose a name, pick a subdomain, and configure your store's basic settings.",
14  },
15  {
16    id: '2.',
17    title: 'Add your products',
18    description:
19      'Upload your catalog with photos, pricing, and inventory details.',
20  },
21  {
22    id: '3.',
23    title: 'Set up payments',
24    description:
25      'Connect Stripe or PayPal to start accepting orders from customers.',
26  },
27  {
28    id: '4.',
29    title: 'Launch your store',
30    description: 'Review everything and publish your storefront to the world.',
31  },
32];
33 
34export function Onboarding03() {
35  const [activeStep, setActiveStep] = useState(0);
36 
37  return (
38    <div className="flex min-h-dvh items-center justify-center bg-background p-4">
39      <div className="sm:mx-auto sm:max-w-lg">
40        <h3 className="font-semibold text-foreground text-lg">Store setup</h3>
41        <p className="mt-1 text-muted-foreground text-sm leading-6">
42          Complete each step to launch your online store.
43        </p>
44        <div className="mt-4 flex items-center justify-end space-x-4">
45          <span className="text-muted-foreground text-sm">
46            Step {activeStep + 1}/{steps.length}
47          </span>
48          <Progress
49            className="w-32"
50            value={(activeStep / steps.length) * 100}
51          />
52        </div>
53        <ul className="mt-4 space-y-4">
54          {steps.map((step, index) => (
55            <li key={step.id}>
56              <button
57                className={cn(
58                  'relative w-full cursor-pointer rounded-lg border bg-card p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
59                  index === activeStep
60                    ? 'border-foreground/20'
61                    : 'border-border'
62                )}
63                onClick={() => setActiveStep(index)}
64                type="button"
65              >
66                <div className="flex items-start space-x-3">
67                  {index < activeStep ? (
68                    <IconCircleCheckFilled
69                      aria-hidden={true}
70                      className="size-6 shrink-0 text-foreground"
71                    />
72                  ) : (
73                    <span
74// … truncated