{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "setup-guide-04",
  "title": "Setup Guide 04",
  "description": "A simple setup guide block",
  "files": [
    {
      "path": "src/registry/blocks/radix/setup-guide-04/components/setup-guide.tsx",
      "content": "import {\n  CheckIcon,\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\";\n\nexport default function SetupGuide() {\n  return (\n    <div className=\"mx-auto max-w-(--breakpoint-md) px-6 py-10 sm:py-16\">\n      <h2 className=\"font-medium text-2xl tracking-tight sm:text-3xl\">\n        Set up your support inbox\n      </h2>\n      <p className=\"mt-2 text-muted-foreground sm:text-lg\">\n        Route incoming requests and give agents the context they need.\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 className=\"absolute inset-y-0 -z-1 translate-x-4 border-r border-dashed\" />\n\n            <Badge\n              className={cn(\n                \"absolute top-1.5 right-1.5 rounded-full border-border text-xs\",\n                {\n                  \"border-primary\": step.status === \"completed\",\n                }\n              )}\n              variant={step.status === \"completed\" ? \"default\" : \"secondary\"}\n            >\n              {step.status === \"completed\" ? \"Completed\" : step.time}\n            </Badge>\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\n              className={cn(\n                \"flex grow flex-col justify-between gap-3 sm:flex-row sm:items-center sm:gap-5\",\n                {\n                  \"sm:items-end\": step.status === \"pending\",\n                }\n              )}\n            >\n              <div className=\"flex-1\">\n                <h3 className=\"text-pretty font-medium sm:text-lg\">\n                  {step.title}\n                </h3>\n                <p className=\"text-pretty text-base text-muted-foreground\">\n                  {step.description}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst setupGuideSteps = [\n  {\n    title: \"Add your support identity\",\n    description: \"Set the sender name and logo customers see in replies.\",\n    time: \"3 minutes\",\n    icon: ImageIcon,\n    status: \"completed\",\n  },\n  {\n    title: \"Arrange the agent workspace\",\n    description: \"Choose the customer details shown beside each ticket.\",\n    time: \"6 minutes\",\n    icon: LayoutDashboardIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Create an urgent-ticket rule\",\n    description: \"Flag payment failures and security reports for review.\",\n    time: \"4 minutes\",\n    icon: Zap,\n    status: \"pending\",\n  },\n  {\n    title: \"Publish saved replies\",\n    description: \"Give agents approved answers to common questions.\",\n    time: \"8 minutes\",\n    icon: FileTextIcon,\n    status: \"pending\",\n  },\n  {\n    title: \"Connect your help center\",\n    description: \"Suggest relevant articles while customers write in.\",\n    time: \"5 minutes\",\n    icon: GlobeIcon,\n    status: \"pending\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}