Update frontend/src/components/CodeBlock.jsx

frontend/src/components/CodeBlock.jsx

@@ -1,66 +1,66 @@
-import React, { 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>
-  );
-};
+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>
+  );
+};