1import { useEffect, useState } from 'react'
3/** A one-line terminal command with a copy button. */
4export default function CopyableCommand({ label, command }: { label: string; command: string }) {
5 const [copied, setCopied] = useState(false)
6 useEffect(() => {
7 if (!copied) return
8 const t = setTimeout(() => setCopied(false), 1500)
9 return () => clearTimeout(t)
10 }, [copied])
11 return (
12 <div className="command-row">
13 <span className="command-label">{label}</span>
14 <code>{command}</code>
15 <button
16 onClick={() => {
17 navigator.clipboard.writeText(command).then(() => setCopied(true))
18 }}
19 >
20 {copied ? 'copied' : 'copy'}
21 </button>
22 </div>
23 )
24}