Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 1,963 Bytes
475a0cb | 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 | import { useState } from 'react';
import { Clipboard, Check } from 'lucide-react';
export const CodeBlock = ({ code }) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy text', err);
}
};
return (
<div style={{
position: 'relative',
marginTop: 'var(--space-sm)',
marginBottom: 'var(--space-sm)'
}}>
{/* Copy Utility Button */}
<button
onClick={handleCopy}
style={{
position: 'absolute',
top: '8px',
right: '8px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
border: 'none',
borderRadius: '4px',
padding: '6px',
cursor: 'pointer',
color: 'var(--inverse-on-surface)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.2s ease',
}}
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'}
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'}
title="Copy remediation block"
>
{copied ? <Check size={14} color="#4caf50" /> : <Clipboard size={14} />}
</button>
{/* Technical monospaced text output */}
<pre style={{
fontFamily: 'JetBrains Mono, monospace',
fontSize: '13px',
backgroundColor: '#020617', // Deep obsidian dark mode code container
color: '#e2e8f0',
borderRadius: 'var(--rounded-md)',
padding: '16px',
paddingRight: '48px',
overflowX: 'auto',
border: '1px solid #1e293b',
lineHeight: '1.6',
margin: 0
}}>
<code>{code}</code>
</pre>
</div>
);
};
|