{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-block-command", "title": "Code Block Command", "author": "shakil-ahmed-billal ", "description": "Display install commands with package manager switcher and copy button.", "dependencies": [ "@base-ui/react", "lucide-react", "motion", "jotai" ], "registryDependencies": [ "https://xhakil.vercel.app/r/copy-button.json", "https://xhakil.vercel.app/r/scroll-fade-effect.json" ], "files": [ { "path": "src/registry/components/code-block-command/code-block-command.tsx", "content": "\"use client\"\r\n\r\nimport { TerminalSquareIcon } from \"lucide-react\"\r\nimport { useMemo } from \"react\"\r\n\r\nimport {\r\n Tabs,\r\n TabsContent,\r\n TabsIndicator,\r\n TabsList,\r\n TabsTrigger,\r\n} from \"@/components/base/ui/tabs\"\r\nimport {\r\n type PackageManager,\r\n usePackageManager,\r\n} from \"@/hooks/use-package-manager\"\r\nimport { CopyButton } from \"@/registry/components/copy-button\"\r\n\r\n/**\r\n * Props for the CodeBlockCommand component.\r\n */\r\nexport type CodeBlockCommandProps = {\r\n /**\r\n * Command to execute with pnpm package manager.\r\n */\r\n pnpm?: string\r\n\r\n /**\r\n * Command to execute with yarn package manager.\r\n */\r\n yarn?: string\r\n\r\n /**\r\n * Command to execute with npm package manager.\r\n */\r\n npm?: string\r\n\r\n /**\r\n * Command to execute with bun package manager.\r\n */\r\n bun?: string\r\n\r\n /**\r\n * Callback invoked when a command is successfully copied to clipboard.\r\n *\r\n * Receives an object containing the selected package manager and the copied command text.\r\n * Useful for tracking user interactions or showing custom success notifications.\r\n *\r\n * @param data - Object containing copy operation details\r\n * @param data.packageManager - The package manager that was selected when copying\r\n * @param data.command - The actual command text that was copied\r\n *\r\n * @example\r\n * ```tsx\r\n * {\r\n * console.log(`Copied ${command} for ${packageManager}`)\r\n * }}\r\n * />\r\n * ```\r\n */\r\n onCopySuccess?: (data: {\r\n packageManager: PackageManager\r\n command: string\r\n }) => void\r\n\r\n /**\r\n * Callback invoked when copying to clipboard fails.\r\n *\r\n * Receives the error object for debugging or showing custom error messages.\r\n *\r\n * @param error - The error that occurred during the copy operation\r\n *\r\n * @example\r\n * ```tsx\r\n * {\r\n * console.error('Copy failed:', error)\r\n * }}\r\n * />\r\n * ```\r\n */\r\n onCopyError?: (error: Error) => void\r\n}\r\n\r\nexport function CodeBlockCommand({\r\n pnpm,\r\n yarn,\r\n npm,\r\n bun,\r\n onCopySuccess,\r\n onCopyError,\r\n}: CodeBlockCommandProps) {\r\n const [packageManager, setPackageManager] = usePackageManager()\r\n\r\n const tabs = useMemo(() => {\r\n return {\r\n pnpm: pnpm,\r\n yarn: yarn,\r\n npm: npm,\r\n bun: bun,\r\n }\r\n }, [pnpm, yarn, npm, bun])\r\n\r\n return (\r\n
\r\n {\r\n setPackageManager(value as PackageManager)\r\n }}\r\n >\r\n
\r\n \r\n {getIconForPackageManager(packageManager)}\r\n\r\n {Object.entries(tabs).map(([key]) => {\r\n return (\r\n \r\n {key}\r\n \r\n )\r\n })}\r\n\r\n \r\n \r\n
\r\n\r\n {Object.entries(tabs).map(([key, value]) => {\r\n return (\r\n \r\n 
\r\n                \r\n                  $ \r\n                  {value}\r\n                \r\n
\r\n \r\n )\r\n })}\r\n \r\n\r\n {\r\n onCopySuccess?.({\r\n packageManager,\r\n command: copiedCommand,\r\n })\r\n }}\r\n onCopyError={onCopyError}\r\n />\r\n
\r\n )\r\n}\r\n\r\nfunction getIconForPackageManager(manager: PackageManager) {\r\n switch (manager) {\r\n case \"pnpm\":\r\n return (\r\n \r\n \r\n \r\n )\r\n case \"yarn\":\r\n return (\r\n \r\n \r\n \r\n )\r\n case \"npm\":\r\n return (\r\n \r\n \r\n \r\n )\r\n case \"bun\":\r\n return (\r\n \r\n \r\n \r\n )\r\n default:\r\n return \r\n }\r\n}\r\n\r\n/**\r\n * Result of converting an npm command to all package managers.\r\n */\r\nexport type ConvertNpmCommandResult = {\r\n /**\r\n * Command for pnpm package manager.\r\n */\r\n pnpm: string\r\n\r\n /**\r\n * Command for yarn package manager.\r\n */\r\n yarn: string\r\n\r\n /**\r\n * Command for npm package manager.\r\n */\r\n npm: string\r\n\r\n /**\r\n * Command for bun package manager.\r\n */\r\n bun: string\r\n}\r\n\r\n/**\r\n * Converts a standard npm command into equivalent commands for pnpm, yarn, npm,\r\n * and bun. The result can be spread directly into `CodeBlockCommand` props.\r\n *\r\n * Supported command patterns:\r\n * - `npm install ` -> add commands for each manager\r\n * - `npx create-` -> create commands for each manager\r\n * - `npm create ` -> create commands for each manager\r\n * - `npx ` -> execute commands for each manager\r\n * - `npm run