58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
interface CodeBlockProps {
|
|
code: string
|
|
language: string
|
|
filename?: string
|
|
showLineNumbers?: boolean
|
|
}
|
|
|
|
export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(code)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
|
|
<div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
|
|
<div className="flex items-center gap-3">
|
|
{filename && (
|
|
<span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">
|
|
>> {filename}
|
|
</span>
|
|
)}
|
|
<span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
|
|
[{language}]
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleCopy}
|
|
className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
|
|
>
|
|
{copied ? '[COPIED✓]' : '[COPY]'}
|
|
</button>
|
|
<div className="flex gap-1">
|
|
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
|
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
|
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative overflow-x-auto">
|
|
<pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
|
|
<code>{code}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|