| 93 | } |
| 94 | |
| 95 | function TerminalBlock({ code, label, className = '' }: { code: string; label?: string; className?: string }) { |
| 96 | const { copied, copy } = useCopy(code) |
| 97 | return ( |
| 98 | <div className={`rounded-xl overflow-hidden border border-[#e5e5e5] dark:border-[#222] bg-[#f6f6f6] dark:bg-[#0c0c0c] ${className}`}> |
| 99 | <div className="relative flex items-center justify-between px-4 h-10 border-b border-[#e0e0e0] dark:border-[#1a1a1a] bg-[#efefef] dark:bg-[#111]"> |
| 100 | <div className="flex items-center gap-1.5"> |
| 101 | <span className="w-3 h-3 rounded-full bg-[#ff5f57]" /> |
| 102 | <span className="w-3 h-3 rounded-full bg-[#febc2e]" /> |
| 103 | <span className="w-3 h-3 rounded-full bg-[#28c840]" /> |
| 104 | </div> |
| 105 | {label && ( |
| 106 | <span className="absolute left-1/2 -translate-x-1/2 font-mono text-xs text-[#aaa] dark:text-[#444]"> |
| 107 | {label} |
| 108 | </span> |
| 109 | )} |
| 110 | <CopyButton copied={copied} copy={copy} /> |
| 111 | </div> |
| 112 | <div className="overflow-x-auto p-5"> |
| 113 | <pre className="text-sm font-mono leading-7"> |
| 114 | <CodeLines code={code} /> |
| 115 | </pre> |
| 116 | </div> |
| 117 | </div> |
| 118 | ) |
| 119 | } |
| 120 | |
| 121 | function EditorBlock({ code, language, label, className = '' }: { code: string; language?: string; label?: string; className?: string }) { |
| 122 | const { copied, copy } = useCopy(code) |