{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-tabs",
  "type": "registry:component",
  "title": "Command Tabs",
  "description": "Easy Command Tabs Component",
  "registryDependencies": [
    "tooltip",
    "tabs",
    "separator"
  ],
  "files": [
    {
      "path": "components/chatcn/ai/command-tabs.tsx",
      "content": "\"use client\";\nimport { useState, useEffect } from \"react\";\nimport {\n  Copy01Icon,\n  ComputerTerminal01Icon,\n  Tick01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst PACKAGE_MANAGER_STORAGE_KEY = \"chatcn-preferred-package-manager\";\n\ninterface CommandItem {\n  label: string;\n  command: string;\n}\n\nexport interface CommandBlockProps {\n  title?: string;\n  command?: string;\n  commands?: CommandItem[];\n  defaultValue?: string;\n  showTerminalIcon?: boolean;\n  className?: string;\n}\n\nfunction SingleCommandBlock({\n  title,\n  command,\n  showTerminalIcon = true,\n  className,\n}: {\n  title?: string;\n  command: string;\n  showTerminalIcon?: boolean;\n  className?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const copyToClipboard = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  return (\n    <div className={cn(\"w-full mx-auto\", className)}>\n      <div className=\"bg-card rounded-md border\">\n        {(title || showTerminalIcon) && (\n          <>\n            <div className=\"flex items-center justify-between px-3 px-sm-4 py-1.5 py-sm-2\">\n              <div className=\"flex items-center space-x-2\">\n                {showTerminalIcon && (\n                  <HugeiconsIcon\n                    icon={ComputerTerminal01Icon}\n                    className=\"text-muted-foreground size-4 sm:size-5\"\n                  />\n                )}\n                {title && (\n                  <span className=\"font-medium text-sm sm:text-base\">\n                    {title}\n                  </span>\n                )}\n              </div>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"h-7 w-7 sm:h-8 sm:w-8 p-0\"\n                    onClick={() => copyToClipboard(command)}\n                  >\n                    {copied ? (\n                      <HugeiconsIcon\n                        icon={Tick01Icon}\n                        className=\"size-3.5 sm:size-4.5\"\n                      />\n                    ) : (\n                      <HugeiconsIcon\n                        icon={Copy01Icon}\n                        className=\"size-4 sm:size-5\"\n                      />\n                    )}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p className=\"text-xs sm:text-sm\">\n                    {copied ? \"Copied!\" : \"Copy to Clipboard\"}\n                  </p>\n                </TooltipContent>\n              </Tooltip>\n            </div>\n            <Separator />\n          </>\n        )}\n        <div className=\"px-3 sm:px-4 py-3 sm:py-4 font-mono bg-card overflow-x-auto text-primary\">\n          <p className=\"wrap-break-word whitespace-pre-wrap text-xs sm:text-sm md:text-base\">\n            {command}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MultiCommandBlock({\n  commands,\n  defaultValue,\n  showTerminalIcon = true,\n  className,\n}: {\n  commands: CommandItem[];\n  defaultValue?: string;\n  showTerminalIcon?: boolean;\n  className?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n  const [activeTab, setActiveTab] = useState(\n    defaultValue || commands[0]?.label\n  );\n\n  useEffect(() => {\n    const savedPreference = localStorage.getItem(PACKAGE_MANAGER_STORAGE_KEY);\n    if (\n      savedPreference &&\n      commands.some((cmd) => cmd.label === savedPreference)\n    ) {\n      setActiveTab(savedPreference);\n    }\n  }, [commands]);\n\n  const handleTabChange = (value: string) => {\n    setActiveTab(value);\n    localStorage.setItem(PACKAGE_MANAGER_STORAGE_KEY, value);\n  };\n\n  const copyToClipboard = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  const activeCommand =\n    commands.find((cmd) => cmd.label === activeTab)?.command || \"\";\n\n  return (\n    <div className={cn(\"w-full mx-auto\", className)}>\n      <Tabs\n        value={activeTab}\n        onValueChange={handleTabChange}\n        className=\"w-full bg-card rounded-md border gap-0\"\n      >\n        <TabsList className=\"flex w-full bg-card justify-between items-center px-1.5 sm:px-2 py-1 my-1 rounded-t-md\">\n          <div className=\"flex items-center\">\n            {showTerminalIcon && (\n              <HugeiconsIcon\n                icon={ComputerTerminal01Icon}\n                className=\"mx-1 sm:mx-2 text-muted-foreground size-4 sm:size-5\"\n              />\n            )}\n            <div className=\"flex\">\n              {commands.map((tab) => (\n                <TabsTrigger\n                  key={tab.label}\n                  value={tab.label}\n                  className=\"text-xs sm:text-sm h-7 sm:h-8 px-2 sm:px-3 data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none\"\n                >\n                  {tab.label}\n                </TabsTrigger>\n              ))}\n            </div>\n          </div>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 w-7 sm:h-8 sm:w-8 p-0\"\n                onClick={() => copyToClipboard(activeCommand)}\n              >\n                {copied ? (\n                  <HugeiconsIcon\n                    icon={Tick01Icon}\n                    className=\"size-3.5 sm:size-4.5\"\n                  />\n                ) : (\n                  <HugeiconsIcon\n                    icon={Copy01Icon}\n                    className=\"size-4 sm:size-5\"\n                  />\n                )}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p className=\"text-xs sm:text-sm\">\n                {copied ? \"Copied!\" : \"Copy to Clipboard\"}\n              </p>\n            </TooltipContent>\n          </Tooltip>\n        </TabsList>\n        <Separator />\n        {commands.map((tab) => (\n          <TabsContent\n            key={tab.label}\n            value={tab.label}\n            className=\"mt-0 p-3 sm:p-4 font-mono bg-card rounded-b-md overflow-x-auto\"\n          >\n            <p className=\"wrap-break-word whitespace-pre-wrap text-xs sm:text-sm md:text-base text-primary\">\n              {tab.command}\n            </p>\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  );\n}\n\nexport default function CommandBlock(props: CommandBlockProps) {\n  const { command, commands, ...rest } = props;\n\n  if (command) {\n    return <SingleCommandBlock command={command} {...rest} />;\n  }\n\n  if (commands && commands.length > 0) {\n    return <MultiCommandBlock commands={commands} {...rest} />;\n  }\n\n  return null;\n}\n",
      "type": "registry:component"
    }
  ]
}