| 1 | "use client"; |
| 2 | |
| 3 | import { useState } from "react"; |
| 4 | |
| 5 | interface Props { |
| 6 | cmd: string; |
| 7 | copyLabel?: string; |
| 8 | copiedLabel?: string; |
| 9 | } |
| 10 | |
| 11 | export function InstallCodeBlock({ cmd, copyLabel = "Copy", copiedLabel = "Copied ✓" }: Props) { |
| 12 | const [copied, setCopied] = useState(false); |
| 13 | |
| 14 | const copy = () => { |
| 15 | if (typeof navigator !== "undefined" && navigator.clipboard) { |
| 16 | navigator.clipboard.writeText(cmd); |
| 17 | setCopied(true); |
| 18 | setTimeout(() => setCopied(false), 1400); |
| 19 | } |
| 20 | }; |
| 21 | |
| 22 | return ( |
| 23 | <div className="relative"> |
| 24 | <button |
| 25 | onClick={copy} |
| 26 | aria-label={copied ? copiedLabel : copyLabel} |
| 27 | className="absolute top-3 right-3 z-10 px-3 py-1 bg-paper hairline-t hairline-b hairline-l hairline-r font-mono text-[0.7rem] uppercase tracking-wider hover:bg-indigo hover:text-paper transition-colors" |
| 28 | > |
| 29 | {copied ? copiedLabel : copyLabel} |
| 30 | </button> |
| 31 | <pre className="code-block text-[0.78rem] m-0 max-w-full pr-20">{cmd}</pre> |
| 32 | </div> |
| 33 | ); |
| 34 | } |
| 35 |