{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-button-group-44","type":"registry:block","title":"Pipeline stage mover with dropdown","description":"Pipeline stage mover with dropdown","dependencies":[],"registryDependencies":["button","button-group","dropdown-menu"],"files":[{"path":"c-button-group-44.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst stages = [\"Lead\", \"Qualified\", \"Proposal\", \"Negotiation\", \"Closed Won\"]\n\nconst icons = {\n  prev: (\n    <IconPlaceholder\n      lucide=\"ChevronLeftIcon\"\n      tabler=\"IconChevronLeft\"\n      hugeicons=\"ArrowLeft01Icon\"\n      phosphor=\"CaretLeftIcon\"\n      remixicon=\"RiArrowLeftSLine\"\n      aria-hidden=\"true\"\n    />\n  ),\n  next: (\n    <IconPlaceholder\n      lucide=\"ChevronRightIcon\"\n      tabler=\"IconChevronRight\"\n      hugeicons=\"ArrowRight01Icon\"\n      phosphor=\"CaretRightIcon\"\n      remixicon=\"RiArrowRightSLine\"\n      aria-hidden=\"true\"\n    />\n  ),\n  chevronsUpDown: (\n    <IconPlaceholder\n      lucide=\"ChevronsUpDownIcon\"\n      tabler=\"IconSelector\"\n      hugeicons=\"ArrowUpDown02Icon\"\n      phosphor=\"CaretUpDownIcon\"\n      remixicon=\"RiExpandUpDownLine\"\n      aria-hidden=\"true\"\n      className=\"size-3.5 shrink-0 opacity-50\"\n    />\n  ),\n  check: (\n    <IconPlaceholder\n      lucide=\"CheckIcon\"\n      tabler=\"IconCheck\"\n      hugeicons=\"Tick02Icon\"\n      phosphor=\"CheckIcon\"\n      remixicon=\"RiCheckLine\"\n      aria-hidden=\"true\"\n      className=\"text-primary ml-auto size-3.5\"\n    />\n  ),\n}\n\nexport function Pattern() {\n  const [stageIndex, setStageIndex] = useState(2)\n\n  return (\n    <ButtonGroup>\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Previous stage\"\n        disabled={stageIndex === 0}\n        onClick={() => setStageIndex((i) => i - 1)}\n      >\n        {icons.prev}\n      </Button>\n\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" className=\"min-w-36 justify-between\">\n              <span className=\"truncate\">{stages[stageIndex]}</span>\n              {icons.chevronsUpDown}\n            </Button>\n          }\n        />\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Jump to stage</DropdownMenuLabel>\n            {stages.map((stage, i) => (\n              <DropdownMenuItem key={stage} onClick={() => setStageIndex(i)}>\n                {stage}\n                {i === stageIndex ? icons.check : null}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Next stage\"\n        disabled={stageIndex === stages.length - 1}\n        onClick={() => setStageIndex((i) => i + 1)}\n      >\n        {icons.next}\n      </Button>\n    </ButtonGroup>\n  )\n}","target":"components/examples/c-button-group-44.tsx"}],"meta":{"order":44}}