merge: align dev branch with main

2026-06-03 08:51:02 +00:00
parent 51a399c775
commit b39d6ce5f4
319 changed files with 30221 additions and 9221 deletions
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+
+import { Icon } from "../../ui/Icon";
+import { highlightCode, loadLanguage } from "../../../utils/language";
+
+interface SyntaxHighlighterProps {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  code,
+  language,
+  showLineNumbers = true,
+}) => {
+  const [highlighted, setHighlighted] = useState(">");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const highlight = async () => {
+      await loadLanguage(language);
+      setHighlighted(highlightCode(code, language));
+    };
+    void highlight();
+  }, [code, language]);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const lines = code.split("\n");
+
+  return (
+    <div className="syntax-highlighter">
+      <div className="highlighter-toolbar">
+        <span className="language-badge">{language}</span>
+        <button
+          className="copy-button"
+          onClick={handleCopy}
+          type="button"
+        >
+          {copied ? (
+            <>
+              <Icon name="success" size="sm" />
+              Copied!
+            </>
+          ) : (
+            <>
+              <Icon name="copy" size="sm" />
+              Copy
+            </>
+          )}
+        </button>
+      </div>
+      <div className="code-container">
+        {showLineNumbers && (
+          <div className="line-numbers">
+            {lines.map((_, i) => (
+              <div key={i} className="line-number">
+                {i + 1}
+              </div>
+            ))}
+          </div>
+        )}
+        <pre className="code-block">
+          <code
+            className={`language-${language}`}
+            dangerouslySetInnerHTML={{ __html: highlighted }}
+          />
+        </pre>
+      </div>
+    </div>
+  );
+};