Code Block Command

1"use client"
2 
3import { useMemo } from "react"
4import { ScrollArea } from "@base-ui/react/scroll-area"
5import { useAtom } from "jotai"
6import { atomWithStorage } from "jotai/utils"
7 
8import { cn } from "@/lib/utils"
9import {
10  Tabs,
11  TabsContent,
12  TabsIndicator,
13  TabsList,
14  TabsTrigger,
15} from "@/components/base/ui/tabs"
16import { CopyButton } from "@/registry/components/copy-button"
17import { IconSwap, IconSwapItem } from "@/registry/components/icon-swap"
18import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
19 
20export type PackageManager = "prompt" | "pnpm" | "yarn" | "npm" | "bun"
21 
22const packageManagerAtom = atomWithStorage<PackageManager>(
23  "packageManager",
24  "pnpm"
25)
26 
27export function usePackageManager() {
28  return useAtom(packageManagerAtom)
29}
30 
31/**
32 * Props for the CodeBlockCommand component.
33 */
34export type CodeBlockCommandProps = {
35  /**
36   * Natural language instruction for AI agents to install a package or component.
37   */
38  prompt?: string
39  /**
40   * Command to execute with pnpm package manager.
41   */
42  pnpm?: string
43 
44  /**
45   * Command to execute with yarn package manager.
46   */
47  yarn?: string
48 
49  /**
50   * Command to execute with npm package manager.
51   */
52  npm?: string
53 
54  /**
55   * Command to execute with bun package manager.
56   */
57  bun?: string
58 
59  /**
60   * Callback invoked when a command is successfully copied to clipboard.
61   *
62   * Receives an object containing the selected package manager and the copied command text.
63   * Useful for tracking user interactions or showing custom success notifications.
64   *
65   * @param data - Object containing copy operation details
66   * @param data.packageManager - The package manager that was selected when copying
67   * @param data.command - The actual command text that was copied
68   *
69   * @example
70   * ```tsx
71   * <CodeBlockCommand
72   *   pnpm="pnpm add react"
73   *   onCopySuccess={({ packageManager, command }) => {
74   *     console.log(`Copied ${command} for ${packageManager}`)
75   *   }}
76   * />
77   * ```
78   */
79  onCopySuccess?: (data: {
80    packageManager: PackageManager
81    command: string
82  }) => void
83 
84  /**
85   * Callback invoked when copying to clipboard fails.
86   *
87   * Receives the error object for debugging or showing custom error messages.
88   *
89   * @param error - The error that occurred during the copy operation
90   *
91   * @example
92   * ```tsx
93   * <CodeBlockCommand
94   *   pnpm="pnpm add react"
95   *   onCopyError={(error) => {
96   *     console.error('Copy failed:', error)
97   *   }}
98// … truncated