Something went wrong. Try again.
Tour the Atmosphere. Switch clients, share universal links, browse any PDS. forked from atpota.to/aturi
Something went wrong. Try again.
2.5 kB · 84 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485'use client';
import { useCallback, useState } from 'react';import { Check, Copy } from 'lucide-react';
interface CodeBlockProps { /** The literal code/command to render and copy. */ code: string; /** Optional small uppercase label shown above the block (e.g. "bash", "tsx"). */ label?: string;}
/** * A copy-to-clipboard code block for the docs page. Leans on the site's global * `pre`/`code` styling (mono font, --bg-tertiary surface) and adds a small copy * button in the corner — the same interaction the waypoints packages expose. * No syntax-highlighting dependency; the site has none and we keep it that way. */export default function CodeBlock({ code, label }: CodeBlockProps) { const [copied, setCopied] = useState(false);
const handleCopy = useCallback(async () => { try { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { // Clipboard unavailable (insecure context / denied) — fail quietly. } }, [code]);
return ( <div style={{ position: 'relative', margin: '1rem 0' }}> {label ? ( <div style={{ fontFamily: 'var(--font-serif)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: '0.4rem', }} > {label} </div> ) : null} <pre style={{ margin: 0, paddingRight: '3rem' }}> <code style={{ display: 'block', background: 'transparent', padding: 0, color: 'var(--text-secondary)', lineHeight: 1.6, }} > {code} </code> </pre> <button type="button" onClick={handleCopy} aria-label={copied ? 'Copied' : 'Copy code'} style={{ position: 'absolute', top: label ? '1.9rem' : '0.5rem', right: '0.5rem', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '0.375rem', background: 'var(--bg-secondary)', border: '1px solid var(--border-medium)', color: copied ? 'var(--text-accent)' : 'var(--text-tertiary)', cursor: 'pointer', transition: 'color 0.2s ease, border-color 0.2s ease', }} > {copied ? <Check size={15} /> : <Copy size={15} />} </button> </div> );}