56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { isValidElement, type ReactNode } from 'react'
|
|
import { CopyButton } from './CopyButton'
|
|
|
|
type CodeWrapperProps = {
|
|
language?: string
|
|
children?: ReactNode
|
|
}
|
|
|
|
function getTextContent(node: ReactNode): string {
|
|
if (node === null || typeof node === 'boolean') return ''
|
|
if (typeof node === 'string' || typeof node === 'number') return String(node)
|
|
if (Array.isArray(node)) return node.map(getTextContent).join('')
|
|
if (isValidElement(node)) {
|
|
const props = node.props as { children?: ReactNode }
|
|
return getTextContent(props.children)
|
|
}
|
|
return ''
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|