All files / src/components/common/Code index.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useEffect, useRef } from "react";
import hljs from "highlight.js/lib/core";
import json from "highlight.js/lib/languages/json";
import "highlight.js/styles/github.css";
import { ContentCopyRounded } from "@mui/icons-material";
import unsecuredCopyToClipboard from "../../../utils/common/unsecuredCopy.ts";
 
hljs.registerLanguage("json", json);
 
type CodePropTypes = {
  content: string;
  language?: string;
};
 
const Code: React.FC<CodePropTypes> = ({ language = "json", content }) => {
  const codeRef = useRef<HTMLPreElement>(null);
 
  const handleCopy = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(content);
    } else {
      unsecuredCopyToClipboard(content);
    }
  };
 
  useEffect(() => {
    Iif (codeRef.current) {
      hljs.highlightBlock(codeRef.current);
    }
  }, [content, language]);
 
  return (
    <div className="!bg-transparent w-full max-h-64 relative overflow-scroll rounded text-sm">
      <pre className={language === "yaml" ? "" : "flex flex-wrap"}>
        <code
          ref={codeRef}
          className={`language-${language} !bg-transparent !p-0 font-medium`}>
          {content}
        </code>
      </pre>
      <div className="absolute top-2 right-2">
        <ContentCopyRounded
          fontSize="small"
          onClick={handleCopy}
          className="hover:text-violet-500 cursor-pointer transition-all"
        />
      </div>
    </div>
  );
};
 
export default Code;