mcpsystem.design MCP Server

'use client'; import { useState } from 'react'; interface CodeBlockProps { code: string; language?: string; showLineNumbers?: boolean; } export function CodeBlock({ code, language = 'html', showLineNumbers = false }: CodeBlockProps) { const [copied, setCopied] = useState(false); const copyToClipboard = async () => { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <div className="relative bg-surface-raised border border-default rounded-xl overflow-hidden"> <div className="flex items-center justify-between px-4 py-2 border-b border-default"> <span className="text-xs text-muted">{language}</span> <button type="button" onClick={copyToClipboard} className="text-xs text-muted hover:text-default transition-colors flex items-center gap-1" > {copied ? ( <> <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> </svg> Copied! </> ) : ( <> <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> Copy </> )} </button> </div> <pre className="p-4 text-sm text-default overflow-x-auto font-mono"> <code>{code}</code> </pre> </div> ); }