Code Block Command

1"use client"
2 
3import { TerminalSquareIcon } from "lucide-react"
4import { useMemo } from "react"
5 
6import {
7  Tabs,
8  TabsContent,
9  TabsIndicator,
10  TabsList,
11  TabsTrigger,
12} from "@/components/base/ui/tabs"
13import {
14  type PackageManager,
15  usePackageManager,
16} from "@/hooks/use-package-manager"
17import { CopyButton } from "@/registry/components/copy-button"
18 
19/**
20 * Props for the CodeBlockCommand component.
21 */
22export type CodeBlockCommandProps = {
23  /**
24   * Command to execute with pnpm package manager.
25   */
26  pnpm?: string
27 
28  /**
29   * Command to execute with yarn package manager.
30   */
31  yarn?: string
32 
33  /**
34   * Command to execute with npm package manager.
35   */
36  npm?: string
37 
38  /**
39   * Command to execute with bun package manager.
40   */
41  bun?: string
42 
43  /**
44   * Callback invoked when a command is successfully copied to clipboard.
45   *
46   * Receives an object containing the selected package manager and the copied command text.
47   * Useful for tracking user interactions or showing custom success notifications.
48   *
49   * @param data - Object containing copy operation details
50   * @param data.packageManager - The package manager that was selected when copying
51   * @param data.command - The actual command text that was copied
52   *
53   * @example
54   * ```tsx
55   * <CodeBlockCommand
56   *   pnpm="pnpm add react"
57   *   onCopySuccess={({ packageManager, command }) => {
58   *     console.log(`Copied ${command} for ${packageManager}`)
59   *   }}
60   * />
61   * ```
62   */
63  onCopySuccess?: (data: {
64    packageManager: PackageManager
65    command: string
66  }) => void
67 
68  /**
69   * Callback invoked when copying to clipboard fails.
70   *
71   * Receives the error object for debugging or showing custom error messages.
72   *
73   * @param error - The error that occurred during the copy operation
74   *
75   * @example
76   * ```tsx
77   * <CodeBlockCommand
78   *   pnpm="pnpm add react"
79   *   onCopyError={(error) => {
80   *     console.error('Copy failed:', error)
81   *   }}
82   * />
83   * ```
84   */
85  onCopyError?: (error: Error) => void
86}
87 
88export function CodeBlockCommand({
89  pnpm,
90  yarn,
91  npm,
92  bun,
93  onCopySuccess,
94  onCopyError,
95}: CodeBlockCommandProps) {
96  const [packageManager, setPackageManager] = usePackageManager()
97 
98  const tabs = useMemo(() => {
99    return {
100      pnpm: pnpm,
101      yarn: yarn,
102      npm: npm,
103      bun: bun,
104    }
105  }, [pnpm, yarn, npm, bun])
106 
107  return (
108    <div className="relative overflow-hidden rounded-xl bg-code">
109      <Tabs
110        className="gap-0"
111// … truncated