Onboarding Accordion

1'use client';
2 
3import {
4  IconAdjustments,
5  IconCalculator,
6  IconChartBar,
7  IconCircleCheckFilled,
8  IconDatabase,
9} from '@tabler/icons-react';
10import { useState } from 'react';
11import {
12  Accordion,
13  AccordionContent,
14  AccordionItem,
15  AccordionTrigger,
16} from '@/components/ui/accordion';
17import { Button } from '@/components/ui/button';
18import { cn } from '@/lib/utils';
19 
20const steps = [
21  {
22    title: 'Configure your environment',
23    subtitle: 'Environment ready',
24    icon: IconAdjustments,
25    description:
26      'Set up your development environment with API keys and preferences.',
27    buttonText: 'Edit settings',
28  },
29  {
30    title: 'Connect your database',
31    subtitle: 'Add connection',
32    icon: IconDatabase,
33    description:
34      'Link your PostgreSQL, MySQL, or MongoDB instance to get started.',
35    buttonText: 'Add database',
36  },
37  {
38    title: 'Define your schema',
39    subtitle: 'Create schema',
40    icon: IconCalculator,
41    description: 'Model your data with types, relations, and validation rules.',
42    buttonText: 'Open editor',
43  },
44  {
45    title: 'Build your first API',
46    subtitle: 'Generate endpoints',
47    icon: IconChartBar,
48    description:
49      'Auto-generate REST or GraphQL endpoints from your schema in seconds.',
50    buttonText: 'Generate API',
51  },
52];
53 
54export function Onboarding04() {
55  const [activeStep, setActiveStep] = useState(1);
56 
57  const [openItem, setOpenItem] = useState(
58    activeStep < steps.length ? steps[activeStep].title : ''
59  );
60 
61  const handleComplete = () => {
62    const next = activeStep + 1;
63    setActiveStep(next);
64    setOpenItem(next < steps.length ? steps[next].title : '');
65  };
66 
67  return (
68    <div className="flex min-h-dvh items-center justify-center bg-background p-4">
69      <div className="mx-auto w-full min-w-0 max-w-sm sm:min-w-sm">
70        <h3 className="font-semibold text-foreground text-lg">Quick start</h3>
71        <p className="mt-1 text-muted-foreground text-sm">
72          Set up your backend in four simple steps
73        </p>
74        <Accordion
75          className="mt-6 space-y-2"
76          onValueChange={(value) => setOpenItem(value[0] ?? '')}
77          value={openItem ? [openItem] : []}
78        >
79          {steps.map((step, index) => {
80            let status: 'complete' | 'current' | 'upcoming' = 'upcoming';
81            if (index < activeStep) {
82              status = 'complete';
83            } else if (index === activeStep) {
84              status = 'current';
85            }
86 
87// … truncated