"use client"; import type { HTMLAttributes } from "react"; import { useEffect, useRef, useState } from "react"; export type CopyCommandButtonProps = Omit, "onCopy"> & { command: string; /** Shell prompt shown before the command. Not copied. */ prompt?: string; copyLabel?: string; copiedLabel?: string; /** Milliseconds before the button returns to its idle label. */ resetAfter?: number; onCopy?: (command: string) => void; onCopyError?: () => void; }; export async function copyText(text: string) { if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") { try { await navigator.clipboard.writeText(text); return true; } catch { // Fall through to the selection-based fallback. } } if (typeof document === "undefined") return false; const area = document.createElement("textarea"); area.value = text; area.setAttribute("readonly", ""); area.style.position = "fixed"; area.style.opacity = "0"; document.body.appendChild(area); area.select(); let copied = false; try { copied = typeof document.execCommand === "function" && document.execCommand("copy"); } catch { copied = false; } area.remove(); return copied; } export function CopyCommandButton({ command, prompt = "$", copyLabel = "Copy", copiedLabel = "Copied", resetAfter = 2000, onCopy, onCopyError, className = "", ...props }: CopyCommandButtonProps) { const [status, setStatus] = useState<"idle" | "copied" | "error">("idle"); const timer = useRef(undefined); useEffect(() => () => window.clearTimeout(timer.current), []); async function handleCopy() { const copied = await copyText(command); window.clearTimeout(timer.current); setStatus(copied ? "copied" : "error"); if (copied) onCopy?.(command); else onCopyError?.(); timer.current = window.setTimeout(() => setStatus("idle"), resetAfter); } return (


        {prompt ? {prompt} : null}
        {command}

{status === "copied" ? "Command copied to clipboard" : status === "error" ? "Copy failed. Select the command and copy it manually." : ""}

); }