{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-04",
  "type": "registry:block",
  "title": "Onboarding Accordion",
  "description": "A onboarding accordion block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "content/components/onboarding/onboarding-04.tsx",
      "type": "registry:component",
      "target": "components/onboarding-04.tsx",
      "content": "'use client';\n\nimport {\n  IconAdjustments,\n  IconCalculator,\n  IconChartBar,\n  IconCircleCheckFilled,\n  IconDatabase,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nconst steps = [\n  {\n    title: 'Configure your environment',\n    subtitle: 'Environment ready',\n    icon: IconAdjustments,\n    description:\n      'Set up your development environment with API keys and preferences.',\n    buttonText: 'Edit settings',\n  },\n  {\n    title: 'Connect your database',\n    subtitle: 'Add connection',\n    icon: IconDatabase,\n    description:\n      'Link your PostgreSQL, MySQL, or MongoDB instance to get started.',\n    buttonText: 'Add database',\n  },\n  {\n    title: 'Define your schema',\n    subtitle: 'Create schema',\n    icon: IconCalculator,\n    description: 'Model your data with types, relations, and validation rules.',\n    buttonText: 'Open editor',\n  },\n  {\n    title: 'Build your first API',\n    subtitle: 'Generate endpoints',\n    icon: IconChartBar,\n    description:\n      'Auto-generate REST or GraphQL endpoints from your schema in seconds.',\n    buttonText: 'Generate API',\n  },\n];\n\nexport function Onboarding04() {\n  const [activeStep, setActiveStep] = useState(1);\n\n  const [openItem, setOpenItem] = useState(\n    activeStep < steps.length ? steps[activeStep].title : ''\n  );\n\n  const handleComplete = () => {\n    const next = activeStep + 1;\n    setActiveStep(next);\n    setOpenItem(next < steps.length ? steps[next].title : '');\n  };\n\n  return (\n    <div className=\"flex min-h-dvh items-center justify-center bg-background p-4\">\n      <div className=\"mx-auto w-full min-w-0 max-w-sm sm:min-w-sm\">\n        <h3 className=\"font-semibold text-foreground text-lg\">Quick start</h3>\n        <p className=\"mt-1 text-muted-foreground text-sm\">\n          Set up your backend in four simple steps\n        </p>\n        <Accordion\n          className=\"mt-6 space-y-2\"\n          onValueChange={(value) => setOpenItem(value[0] ?? '')}\n          value={openItem ? [openItem] : []}\n        >\n          {steps.map((step, index) => {\n            let status: 'complete' | 'current' | 'upcoming' = 'upcoming';\n            if (index < activeStep) {\n              status = 'complete';\n            } else if (index === activeStep) {\n              status = 'current';\n            }\n\n            return (\n              <AccordionItem\n                className=\"!border-b rounded-lg border shadow-xs\"\n                key={step.title}\n                value={step.title}\n              >\n                <AccordionTrigger className=\"px-4 hover:no-underline\">\n                  <div className=\"flex items-center space-x-2\">\n                    {status === 'complete' ? (\n                      <span\n                        aria-hidden\n                        className=\"flex size-5 items-center justify-center\"\n                      >\n                        <IconCircleCheckFilled\n                          aria-hidden\n                          className=\"size-6 shrink-0 text-foreground\"\n                        />\n                      </span>\n                    ) : (\n                      <span\n                        aria-hidden\n                        className=\"size-5 shrink-0 rounded-full border border-border\"\n                      />\n                    )}\n                    <p\n                      className={cn(\n                        'font-medium text-sm',\n                        status === 'upcoming'\n                          ? 'text-muted-foreground/60'\n                          : 'text-foreground'\n                      )}\n                    >\n                      {step.title}\n                    </p>\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"px-4\">\n                  <div className=\"flex items-center justify-center rounded-md bg-muted px-4 py-5 ring-1 ring-ring ring-inset\">\n                    <div className=\"max-w-xs text-center\">\n                      <step.icon\n                        aria-hidden\n                        className=\"mx-auto size-7 shrink-0 text-muted-foreground\"\n                      />\n                      <p className=\"mt-4 font-semibold text-muted-foreground text-sm\">\n                        {step.subtitle}\n                      </p>\n                      <p className=\"mt-1 text-muted-foreground text-sm\">\n                        {step.description}\n                      </p>\n                      {status === 'complete' ? (\n                        <Button className=\"mt-6\" size=\"sm\" variant=\"outline\">\n                          {step.buttonText}\n                        </Button>\n                      ) : (\n                        <Button\n                          className=\"mt-6\"\n                          disabled={status === 'upcoming'}\n                          onClick={() => {\n                            if (status === 'current') {\n                              handleComplete();\n                            }\n                          }}\n                          size=\"sm\"\n                        >\n                          {step.buttonText}\n                        </Button>\n                      )}\n                    </div>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            );\n          })}\n        </Accordion>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "onboarding"
  ]
}