File size: 3,903 Bytes
6d9f36a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import Prism from "prismjs"
import "prismjs/themes/prism-tomorrow.css"
import "prismjs/components/prism-javascript"
import "prismjs/components/prism-typescript"
import "prismjs/components/prism-python"
import "prismjs/components/prism-jsx"
import "prismjs/components/prism-tsx"
import "prismjs/components/prism-json"
import "prismjs/components/prism-bash"
import "prismjs/components/prism-markup"
import "prismjs/components/prism-css"
interface CodeSnippetProps {
filename?: string
language?: string
code: string
delay?: number
className?: string
showLineNumbers?: boolean
copyable?: boolean
}
const LANGUAGE_MAP: Record<string, string> = {
js: "javascript",
javascript: "javascript",
ts: "typescript",
typescript: "typescript",
py: "python",
python: "python",
jsx: "jsx",
tsx: "tsx",
json: "json",
bash: "bash",
sh: "bash",
html: "markup",
css: "css",
sql: "sql",
go: "go",
rust: "rust",
java: "java",
};
export function CodeSnippet({
filename = "example.js",
language = "javascript",
code,
delay = 0.5,
className = "",
showLineNumbers = false,
copyable = true,
}: CodeSnippetProps) {
const [copied, setCopied] = useState(false);
const prismLanguage = LANGUAGE_MAP[language.toLowerCase()] || language;
useEffect(() => {
// Highlight code whenever component mounts or code changes
Prism.highlightAll();
}, [code, language]);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy:", err);
}
};
const displayLanguage = language.toUpperCase();
return (
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay }}
className={`group relative w-full max-w-3xl rounded-xl overflow-hidden border border-white/10 shadow-2xl bg-[#0d1117]/80 backdrop-blur-sm ${className}`}
>
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-white/5 bg-gradient-to-r from-white/[0.03] to-white/[0.01]">
<div className="flex items-center gap-2">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-500/80" />
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
<div className="w-3 h-3 rounded-full bg-green-500/80" />
</div>
<div className="text-xs text-muted-foreground ml-2 font-mono truncate">
{filename}
</div>
</div>
<div className="flex items-center gap-3">
{copyable && (
<Button
variant="ghost"
size="sm"
onClick={handleCopy}
className="h-7 px-2 hover:bg-white/10 transition-colors"
>
{copied ? (
<Check className="w-3.5 h-3.5 text-green-400" />
) : (
<Copy className="w-3.5 h-3.5 text-gray-400" />
)}
<span className="ml-1 text-xs">
{copied ? "Copied!" : "Copy"}
</span>
</Button>
)}
</div>
</div>
{/* Code Area */}
<div className="relative">
<pre className={`font-mono text-sm leading-relaxed m-0 overflow-x-auto p-6 ${showLineNumbers ? 'line-numbers' : ''}`}>
<code className={`language-${prismLanguage}`}>
{code}
</code>
</pre>
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0d1117] to-transparent pointer-events-none" />
</div>
</motion.div>
);
}
|