|
| 1 | +"use client" |
| 2 | + |
| 3 | +import * as React from "react" |
| 4 | +import { CheckIcon, ClipboardIcon } from "lucide-react" |
| 5 | + |
| 6 | +import { NpmCommands } from "@/types/unist" |
| 7 | +import { useConfig } from "@/hooks/use-config" |
| 8 | +import { copyToClipboardWithMeta } from "@/components/copy-button" |
| 9 | +import { Tabs } from "@/registry/default/ui/tabs" |
| 10 | +import { Button } from "@/registry/new-york/ui/button" |
| 11 | +import { TabsContent, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs" |
| 12 | + |
| 13 | +export function CodeBlockCommand({ |
| 14 | + __npmCommand__, |
| 15 | + __yarnCommand__, |
| 16 | + __pnpmCommand__, |
| 17 | + __bunCommand__, |
| 18 | +}: React.ComponentProps<"pre"> & NpmCommands) { |
| 19 | + const [config, setConfig] = useConfig() |
| 20 | + const [hasCopied, setHasCopied] = React.useState(false) |
| 21 | + |
| 22 | + React.useEffect(() => { |
| 23 | + if (hasCopied) { |
| 24 | + const timer = setTimeout(() => setHasCopied(false), 2000) |
| 25 | + return () => clearTimeout(timer) |
| 26 | + } |
| 27 | + }, [hasCopied]) |
| 28 | + |
| 29 | + const packageManager = config.packageManager || "pnpm" |
| 30 | + const tabs = React.useMemo(() => { |
| 31 | + return { |
| 32 | + pnpm: __pnpmCommand__, |
| 33 | + npm: __npmCommand__, |
| 34 | + yarn: __yarnCommand__, |
| 35 | + bun: __bunCommand__, |
| 36 | + } |
| 37 | + }, [__npmCommand__, __pnpmCommand__, __yarnCommand__, __bunCommand__]) |
| 38 | + |
| 39 | + const copyCommand = React.useCallback(() => { |
| 40 | + const command = tabs[packageManager] |
| 41 | + |
| 42 | + if (!command) { |
| 43 | + return |
| 44 | + } |
| 45 | + |
| 46 | + copyToClipboardWithMeta(command, { |
| 47 | + name: "copy_npm_command", |
| 48 | + properties: { |
| 49 | + command, |
| 50 | + pm: packageManager, |
| 51 | + }, |
| 52 | + }) |
| 53 | + setHasCopied(true) |
| 54 | + }, [packageManager, tabs]) |
| 55 | + |
| 56 | + return ( |
| 57 | + <div className="relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900"> |
| 58 | + <Tabs |
| 59 | + defaultValue={packageManager} |
| 60 | + onValueChange={(value) => { |
| 61 | + setConfig({ |
| 62 | + ...config, |
| 63 | + packageManager: value as "pnpm" | "npm" | "yarn" | "bun", |
| 64 | + }) |
| 65 | + }} |
| 66 | + > |
| 67 | + <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5"> |
| 68 | + <TabsList className="h-7 translate-y-[2px] gap-3 bg-transparent p-0 pl-1"> |
| 69 | + {Object.entries(tabs).map(([key, value]) => { |
| 70 | + return ( |
| 71 | + <TabsTrigger |
| 72 | + key={key} |
| 73 | + value={key} |
| 74 | + className="rounded-none border-b border-transparent bg-transparent p-0 pb-1.5 font-mono text-zinc-400 data-[state=active]:border-b-zinc-50 data-[state=active]:bg-transparent data-[state=active]:text-zinc-50" |
| 75 | + > |
| 76 | + {key} |
| 77 | + </TabsTrigger> |
| 78 | + ) |
| 79 | + })} |
| 80 | + </TabsList> |
| 81 | + </div> |
| 82 | + {Object.entries(tabs).map(([key, value]) => { |
| 83 | + return ( |
| 84 | + <TabsContent key={key} value={key} className="mt-0"> |
| 85 | + <pre className="px-4 py-5"> |
| 86 | + <code |
| 87 | + className="relative font-mono text-sm leading-none" |
| 88 | + data-language="bash" |
| 89 | + > |
| 90 | + {value} |
| 91 | + </code> |
| 92 | + </pre> |
| 93 | + </TabsContent> |
| 94 | + ) |
| 95 | + })} |
| 96 | + </Tabs> |
| 97 | + <Button |
| 98 | + size="icon" |
| 99 | + variant="ghost" |
| 100 | + className="absolute right-2.5 top-2 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3" |
| 101 | + onClick={copyCommand} |
| 102 | + > |
| 103 | + <span className="sr-only">Copy</span> |
| 104 | + {hasCopied ? <CheckIcon /> : <ClipboardIcon />} |
| 105 | + </Button> |
| 106 | + </div> |
| 107 | + ) |
| 108 | +} |
0 commit comments