'use client'; import { IconAdjustments, IconCalculator, IconChartBar, IconCircleCheckFilled, IconDatabase, } from '@tabler/icons-react'; import { useState } from 'react'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; const steps = [ { title: 'Configure your environment', subtitle: 'Environment ready', icon: IconAdjustments, description: 'Set up your development environment with API keys and preferences.', buttonText: 'Edit settings', }, { title: 'Connect your database', subtitle: 'Add connection', icon: IconDatabase, description: 'Link your PostgreSQL, MySQL, or MongoDB instance to get started.', buttonText: 'Add database', }, { title: 'Define your schema', subtitle: 'Create schema', icon: IconCalculator, description: 'Model your data with types, relations, and validation rules.', buttonText: 'Open editor', }, { title: 'Build your first API', subtitle: 'Generate endpoints', icon: IconChartBar, description: 'Auto-generate REST or GraphQL endpoints from your schema in seconds.', buttonText: 'Generate API', }, ]; export function Onboarding04() { const [activeStep, setActiveStep] = useState(1); const [openItem, setOpenItem] = useState( activeStep < steps.length ? steps[activeStep].title : '' ); const handleComplete = () => { const next = activeStep + 1; setActiveStep(next); setOpenItem(next < steps.length ? steps[next].title : ''); }; return (

Quick start

Set up your backend in four simple steps

setOpenItem(value[0] ?? '')} value={openItem ? [openItem] : []} > {steps.map((step, index) => { let status: 'complete' | 'current' | 'upcoming' = 'upcoming'; if (index < activeStep) { status = 'complete'; } else if (index === activeStep) { status = 'current'; } return (

{status === 'complete' ? ( ) : ( )}

{step.title}

{step.subtitle}

{step.description}

{status === 'complete' ? ( ) : ( )}

); })}

); }