{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "setup-guide-01",
  "title": "Setup Guide 01",
  "description": "A simple setup guide block",
  "files": [
    {
      "path": "src/registry/blocks/radix/setup-guide-01/components/setup-guide.tsx",
      "content": "import {\n  CheckIcon,\n  ChevronRightIcon,\n  FileTextIcon,\n  GlobeIcon,\n  ImageIcon,\n  LayoutDashboardIcon,\n  Zap,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nexport default function SetupGuide() {\n  return (\n    <div className=\"mx-auto max-w-xl px-6 py-10 sm:py-16\">\n      <h2 className=\"font-medium text-2xl tracking-tight sm:text-3xl\">\n        Open your client portal\n      </h2>\n      <p className=\"mt-2 text-muted-foreground sm:text-lg\">\n        Complete these steps before you invite your first client.\n      </p>\n\n      <div className=\"mt-6 flex flex-col divide-y overflow-hidden rounded-xl border bg-card shadow-lg/[0.03]\">\n        {setupGuideSteps.map((step) => (\n          <div\n            className={cn(\n              \"relative isolate flex items-center gap-5 px-6 py-4 sm:px-8\",\n              {\n                \"bg-primary/8\": step.status === \"completed\",\n                \"cursor-pointer transition-colors hover:bg-muted/50\":\n                  step.status === \"pending\",\n              }\n            )}\n            key={step.title}\n          >\n            {/* Decorative line */}\n            <div\n              className={cn(\n                \"absolute inset-y-0 -z-1 translate-x-4 border-r border-dashed\",\n                {\n                  \"border-primary/20 dark:border-primary/25\":\n                    step.status === \"completed\",\n                }\n              )}\n            />\n\n            <div\n              className={cn(\n                \"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted\",\n                {\n                  \"bg-primary\": step.status === \"completed\",\n                  \"border border-dashed\": step.status === \"pending\",\n                }\n              )}\n            >\n              {step.status === \"completed\" ? (\n                <CheckIcon className=\"size-4 text-primary-foreground\" />\n              ) : (\n                <step.icon className=\"size-4\" />\n              )}\n            </div>\n\n            <div className=\"flex grow flex-col justify-between gap-3 sm:flex-row sm:items-center sm:gap-5\">\n              <div className=\"flex-1\">\n                <h3 className=\"font-medium\">{step.title}</h3>\n              </div>\n\n              <div className=\"leading-none\">\n                {step.status === \"completed\" && <Badge>Completed</Badge>}\n                {step.status === \"pending\" && (\n                  <Button className=\"h-6 sm:ml-0\" size=\"sm\" variant=\"secondary\">\n                    Start <ChevronRightIcon />\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst setupGuideSteps = [\n  {\n    title: \"Add your company details\",\n    description: \"Add the name, logo, and contact details clients will see.\",\n    time: \"2 minutes\",\n    icon: ImageIcon,\n    status: \"completed\",\n  },\n  {\n    title: \"Organize the client dashboard\",\n    description: \"Choose which projects, files, and invoices appear.\",\n    time: \"5 minutes\",\n    icon: LayoutDashboardIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Connect a payment account\",\n    description: \"Accept card and bank payments on invoices.\",\n    time: \"3 minutes\",\n    icon: Zap,\n    status: \"pending\",\n  },\n  {\n    title: \"Upload your service agreement\",\n    description: \"Add the contract clients sign before work begins.\",\n    time: \"4 minutes\",\n    icon: FileTextIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Choose a portal address\",\n    description: \"Use a branded subdomain or connect your own domain.\",\n    time: \"5 minutes\",\n    icon: GlobeIcon,\n    status: \"pending\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}