66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Check, Copy } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/cn';
|
||
|
|
|
||
|
|
export interface CodeBlockProps {
|
||
|
|
code: string;
|
||
|
|
language?: string;
|
||
|
|
label?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CodeBlock({ code, language, label, className }: CodeBlockProps) {
|
||
|
|
const [copied, setCopied] = useState(false);
|
||
|
|
|
||
|
|
async function onCopy() {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(code);
|
||
|
|
setCopied(true);
|
||
|
|
setTimeout(() => setCopied(false), 1500);
|
||
|
|
} catch {}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={cn('panel-subtle relative overflow-hidden', className)}>
|
||
|
|
{(label || language) && (
|
||
|
|
<div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
|
||
|
|
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
|
||
|
|
{label ?? language}
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onCopy}
|
||
|
|
aria-label="Copy"
|
||
|
|
className="inline-flex items-center gap-1.5 rounded-sm text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
|
||
|
|
>
|
||
|
|
{copied ? (
|
||
|
|
<>
|
||
|
|
<Check size={12} /> copied
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<Copy size={12} /> copy
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{!label && !language && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onCopy}
|
||
|
|
aria-label="Copy"
|
||
|
|
className="absolute right-2 top-2 inline-flex items-center gap-1.5 rounded-sm border border-[--color-border] bg-[--color-bg-elevated] px-2 py-1 text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
|
||
|
|
>
|
||
|
|
{copied ? <Check size={12} /> : <Copy size={12} />}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
|
||
|
|
<code>{code}</code>
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|