65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import {motion} from 'framer-motion';
|
|
import React, {useState} from 'react';
|
|
import {Check, Copy} from 'lucide-react';
|
|
|
|
interface CodeBlockProps {
|
|
code: string;
|
|
language?: string;
|
|
title?: string;
|
|
showCopy?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Reusable code block component with syntax highlighting styling and copy functionality
|
|
*/
|
|
export function CodeBlock({code, language = 'javascript', title, showCopy = true}: CodeBlockProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(code);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-900'}
|
|
>
|
|
{(title || showCopy) && (
|
|
<div className={'flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-6 py-3'}>
|
|
{title && <span className={'text-sm font-medium text-neutral-400'}>{title}</span>}
|
|
{!title && <span className={'text-xs font-medium text-neutral-500 uppercase'}>{language}</span>}
|
|
{showCopy && (
|
|
<button
|
|
onClick={handleCopy}
|
|
className={
|
|
'flex items-center gap-2 rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-1.5 text-xs font-medium text-neutral-300 transition hover:bg-neutral-700 hover:text-white'
|
|
}
|
|
aria-label="Copy code"
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<Check className="h-3 w-3" />
|
|
Copied!
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy className="h-3 w-3" />
|
|
Copy
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<pre className={'overflow-x-auto p-6 text-neutral-100'}>
|
|
<code className={'font-mono text-sm leading-relaxed'}>{code}</code>
|
|
</pre>
|
|
</motion.div>
|
|
);
|
|
}
|