| import { useState } from "react"; | |
| import { Copy, Check } from "lucide-react"; | |
| interface CodeBlockComponentProps { | |
| code?: string; | |
| language?: string; | |
| title?: string; | |
| } | |
| export function CodeBlockComponent({ code = "// Hello world snippet", language = "javascript", title = "Code Snippet" }: CodeBlockComponentProps) { | |
| const [copied, setCopied] = useState(false); | |
| const handleCopy = async () => { | |
| await navigator.clipboard.writeText(code); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| return ( | |
| <div className="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700"> | |
| <div className="bg-gray-100 dark:bg-gray-800 px-4 py-2 flex justify-between items-center"> | |
| <span className="text-xs font-mono">{language}</span> | |
| <button onClick={handleCopy} className="text-gray-500 hover:text-primary"> | |
| {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />} | |
| </button> | |
| </div> | |
| <pre className="bg-gray-900 text-gray-100 p-4 overflow-x-auto text-sm font-mono"> | |
| <code>{code}</code> | |
| </pre> | |
| {title && <div className="bg-gray-50 dark:bg-gray-800/50 px-4 py-1 text-xs text-gray-500">{title}</div>} | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.24 kB
- Xet hash:
- 90cb3179ae7777988c4eb8829c7c334d18b4372803f31e31c94d35e0a66d3b19
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.