dd03d86642
- Remove 'bash' language label that overlapped with code text - Add zoom (scroll), pan (drag), and fullscreen toggle to Mermaid diagrams - Fullscreen mode with dark overlay, controls toolbar, and Esc to close - Zoom percentage indicator and reset button
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type ReactNode } from "react";
|
|
import { Check, Copy } from "lucide-react";
|
|
|
|
interface CodeBlockProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
inline?: boolean;
|
|
}
|
|
|
|
export function CodeBlock({ children, className, inline }: CodeBlockProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
if (inline) {
|
|
return (
|
|
<code className="px-1.5 py-0.5 rounded bg-white/10 text-blue-300 text-[0.85em] font-mono border border-white/5">
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
|
|
const codeString = String(children).replace(/\n$/, "");
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(codeString);
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="relative group my-4">
|
|
<button
|
|
onClick={handleCopy}
|
|
className="absolute top-2 right-2 p-1.5 rounded-md bg-white/5 border border-white/10 text-zinc-500 hover:text-white hover:bg-white/10 transition-all opacity-0 group-hover:opacity-100 z-10"
|
|
aria-label="Copy code"
|
|
>
|
|
{copied ? (
|
|
<Check className="w-3.5 h-3.5 text-green-400" />
|
|
) : (
|
|
<Copy className="w-3.5 h-3.5" />
|
|
)}
|
|
</button>
|
|
<pre className="overflow-x-auto rounded-lg bg-black/50 border border-white/10 p-4 text-sm leading-relaxed font-mono scrollbar-thin">
|
|
<code className={`text-zinc-300 ${className || ""}`}>{codeString}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|