{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "setup-guide-02",
  "title": "Setup Guide 02",
  "description": "A simple setup guide block",
  "files": [
    {
      "path": "src/registry/blocks/radix/setup-guide-02/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\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\";\nimport { Progress } from \"@/registry/bases/radix/ui/progress\";\n\nexport default function SetupGuide() {\n  return (\n    <div className=\"px-6 py-12\">\n      <Card className=\"mx-auto my-10 max-w-xl gap-1 overflow-hidden rounded-xl bg-card pb-0 sm:my-16\">\n        <CardHeader className=\"gap-1.5 px-8\">\n          <CardTitle className=\"font-medium text-2xl tracking-tight\">\n            Get your store ready\n          </CardTitle>\n          <CardDescription className=\"text-base text-muted-foreground\">\n            One last pass before your first order comes in.\n          </CardDescription>\n\n          <Progress className=\"mt-4\" value={completionPercentage} />\n        </CardHeader>\n\n        <CardContent className=\"mt-7 flex flex-col bg-card px-0\">\n          {setupGuideSteps.map((step) => (\n            <div\n              className={cn(\n                \"relative isolate flex items-center gap-5 border-t 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 text-base\">{step.title}</h3>\n                </div>\n\n                <div className=\"leading-none\">\n                  {step.status === \"completed\" && <Badge>Completed</Badge>}\n                  {step.status === \"pending\" && (\n                    <Button\n                      className=\"h-6 sm:ml-0\"\n                      size=\"sm\"\n                      variant=\"secondary\"\n                    >\n                      Start <ChevronRightIcon />\n                    </Button>\n                  )}\n                </div>\n              </div>\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nconst setupGuideSteps = [\n  {\n    title: \"Add your store logo\",\n    description: \"Upload the mark shown in your header and order emails.\",\n    time: \"2 minutes\",\n    icon: ImageIcon,\n    status: \"completed\",\n  },\n  {\n    title: \"Customize the storefront\",\n    description: \"Choose a theme and preview your product pages.\",\n    time: \"5 minutes\",\n    icon: LayoutDashboardIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Configure checkout\",\n    description: \"Set your currency, payment methods, and tax rules.\",\n    time: \"5 minutes\",\n    icon: Zap,\n    status: \"pending\",\n  },\n  {\n    title: \"Write your shipping policy\",\n    description: \"Tell customers where you ship and when orders arrive.\",\n    time: \"4 minutes\",\n    icon: FileTextIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Connect your store domain\",\n    description: \"Point an existing domain to your new storefront.\",\n    time: \"3 minutes\",\n    icon: GlobeIcon,\n    status: \"pending\",\n  },\n];\n\nconst totalSteps = setupGuideSteps.length;\nconst completedSteps = setupGuideSteps.filter(\n  (step) => step.status === \"completed\"\n).length;\nconst completionPercentage = (completedSteps / totalSteps) * 100;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}