Spaces:
Running
Running
File size: 1,554 Bytes
f737def | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | "use client"
import { useState } from "react"
import { Check, Copy } from "lucide-react"
/** A labeled, copy-pasteable BibTeX block. */
export function CiteBlock({ bibtex, label = "BibTeX" }: { bibtex: string; label?: string }) {
const [copied, setCopied] = useState(false)
const copy = async () => {
try {
await navigator.clipboard.writeText(bibtex)
setCopied(true)
setTimeout(() => setCopied(false), 1800)
} catch {
// clipboard unavailable — the text is still selectable in the <pre>.
}
}
return (
<div className="border border-[color:var(--border-soft)]">
<div className="flex items-center justify-between border-b border-[color:var(--border-soft)] bg-[color:var(--bg-warm)] px-4 py-2.5">
<span className="kicker">{label}</span>
<button
type="button"
onClick={copy}
className="inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.12em] text-[color:var(--fg-muted)] transition-colors hover:text-[color:var(--fg)]"
>
{copied ? (
<>
<Check className="h-3.5 w-3.5 text-[color:var(--accent)]" aria-hidden />
Copied
</>
) : (
<>
<Copy className="h-3.5 w-3.5" aria-hidden />
Copy
</>
)}
</button>
</div>
<pre className="m-0 overflow-x-auto p-4 font-mono text-[12px] leading-[1.6] text-[color:var(--fg)]">
<code>{bibtex}</code>
</pre>
</div>
)
}
|