45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { CopyButton } from '@/components/ui/CopyButton'
|
|
import { getTextContent } from '@/lib/react-node-text'
|
|
|
|
type CodeWrapperProps = {
|
|
language?: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function CodeWrapper({ language, children }: CodeWrapperProps) {
|
|
const text = getTextContent(children).replace(/\n$/, '')
|
|
const lineCount = text.length === 0 ? 1 : text.split('\n').length
|
|
|
|
return (
|
|
<div className="bg-foreground/10 rounded-md overflow-x-auto border border-border bg-fg/10">
|
|
<div
|
|
className="flex items-center gap-2 px-2 h-6 border-b border-border w-full"
|
|
aria-hidden="true"
|
|
>
|
|
<div className="space-x-1">
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
</div>
|
|
<span className="text-xs text-fg-dim font-mono">{language ?? 'code'}</span>
|
|
<CopyButton textToCopy={text} className="ml-auto" />
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="select-none text-right py-2 px-3 border-r border-border text-white font-mono text-sm leading-6 min-w-6">
|
|
{Array.from({ length: lineCount }, (_, i) => (
|
|
<span className="block text-fg-dim" key={i}>
|
|
{i + 1}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<pre className="flex-1 p-2 m-0 overflow-x-auto text-fg-dim font-mono text-sm leading-6">
|
|
{children}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|