38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
|
import { cn } from '@/lib/cn';
|
||
|
|
|
||
|
|
export interface StaticCodeBlockProps {
|
||
|
|
code: string;
|
||
|
|
language?: string;
|
||
|
|
label?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Server-only variant of CodeBlock — no copy button, no client hydration.
|
||
|
|
*
|
||
|
|
* Use this for above-the-fold marketing content where every kilobyte of
|
||
|
|
* JS hurts LCP. The interactive CodeBlock pulls in lucide-react icons and
|
||
|
|
* a useState boundary that forces an entire client chunk to load before
|
||
|
|
* Lighthouse considers the element "rendered". This static variant is
|
||
|
|
* pure SSR markup and lets the browser paint as soon as the HTML arrives.
|
||
|
|
*
|
||
|
|
* CodeBlock (with copy button) stays in use for dashboard pages where
|
||
|
|
* users actually want to copy snippets.
|
||
|
|
*/
|
||
|
|
export function StaticCodeBlock({ code, language, label, className }: StaticCodeBlockProps) {
|
||
|
|
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>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
|
||
|
|
<code>{code}</code>
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|