{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-popover-11","type":"registry:block","title":"Popover with navigation","description":"Popover with navigation","dependencies":[],"registryDependencies":["button","popover"],"files":[{"path":"c-popover-11.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [\n  {\n    title: \"Invite Your Team\",\n    description:\n      \"Add team members by email to collaborate on projects in real time. Assign roles and manage permissions from the team settings.\",\n  },\n  {\n    title: \"Create a Project\",\n    description:\n      \"Set up your first project with a name, description, and timeline. Choose from templates or start from scratch.\",\n  },\n  {\n    title: \"Connect Integrations\",\n    description:\n      \"Link tools like GitHub, Slack, and Figma to streamline your workflow and keep everything in sync.\",\n  },\n  {\n    title: \"Set Up Notifications\",\n    description:\n      \"Customize which events trigger alerts — mentions, due dates, status changes, and deployment updates.\",\n  },\n]\n\nexport function Pattern() {\n  const [currentStep, setCurrentStep] = useState(0)\n\n  const handleNext = () => {\n    if (currentStep < steps.length - 1) {\n      setCurrentStep(currentStep + 1)\n    }\n  }\n\n  const handlePrev = () => {\n    if (currentStep > 0) {\n      setCurrentStep(currentStep - 1)\n    }\n  }\n\n  const isFirst = currentStep === 0\n  const isLast = currentStep === steps.length - 1\n\n  return (\n    <div className=\"flex min-h-[100px] items-center justify-center\">\n      <Popover>\n        <PopoverTrigger render={<Button variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"CompassIcon\"\n            tabler=\"IconCompass\"\n            hugeicons=\"Navigation04Icon\"\n            phosphor=\"CompassIcon\"\n            remixicon=\"RiCompassLine\"\n            aria-hidden=\"true\"\n          />\n          Feature Tour\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-72 gap-2 px-3 pt-3 pb-2\"\n          side=\"top\"\n          sideOffset={8}\n        >\n          <div className=\"space-y-2\">\n            <p className=\"leading-tight font-medium\">\n              {steps[currentStep].title}\n            </p>\n            <p className=\"text-muted-foreground\">\n              {steps[currentStep].description}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">\n              {currentStep + 1} of {steps.length}\n            </span>\n            <div className=\"flex gap-0.5\">\n              <Button\n                aria-label=\"Previous step\"\n                className=\"size-6\"\n                disabled={isFirst}\n                onClick={handlePrev}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowLeftIcon\"\n                  tabler=\"IconArrowLeft\"\n                  hugeicons=\"ArrowLeft02Icon\"\n                  phosphor=\"ArrowLeftIcon\"\n                  remixicon=\"RiArrowLeftLine\"\n                  className=\"size-3.5\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n              <Button\n                aria-label=\"Next step\"\n                className=\"size-6\"\n                disabled={isLast}\n                onClick={handleNext}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight02Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                  className=\"size-3.5\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}","target":"components/examples/c-popover-11.tsx"}],"meta":{"order":11}}