| 141 | } |
| 142 | |
| 143 | function InlineBlock({ code, className = '' }: { code: string; className?: string }) { |
| 144 | const { copied, copy } = useCopy(code) |
| 145 | return ( |
| 146 | <div className={`group flex items-center justify-between gap-4 rounded-lg border border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#f8f8f8] dark:bg-[#0c0c0c] px-4 h-11 hover:border-[#d0d0d0] dark:hover:border-[#2a2a2a] transition-colors duration-150 ${className}`}> |
| 147 | <div className="flex items-center gap-2 min-w-0"> |
| 148 | <span className="text-[#bbb] dark:text-[#555] font-mono text-sm select-none shrink-0">$</span> |
| 149 | <code className="font-mono text-sm text-[#111] dark:text-[#d4d4d4] truncate">{code}</code> |
| 150 | </div> |
| 151 | <button |
| 152 | onClick={copy} |
| 153 | className={`shrink-0 flex items-center justify-center w-6 h-6 rounded transition-all duration-150 |
| 154 | ${copied |
| 155 | ? 'text-green-600 dark:text-[#28c840]' |
| 156 | : 'text-[#ccc] dark:text-[#333] group-hover:text-[#888] dark:group-hover:text-[#666]' |
| 157 | }`} |
| 158 | aria-label={copied ? 'Copied' : 'Copy'} |
| 159 | > |
| 160 | {copied ? <CheckIcon /> : <ClipboardIcon />} |
| 161 | </button> |
| 162 | </div> |
| 163 | ) |
| 164 | } |
| 165 | |
| 166 | export default function CodeBlock({ code, language, label, variant = 'editor', className = '' }: CodeBlockProps) { |
| 167 | if (variant === 'terminal') return <TerminalBlock code={code} label={label} className={className} /> |