added download button, downlaod handler and necessary utility functions (#85)

Co-authored-by: Patanjali Kumar <patanjali@oddup.com>
2023-03-23 12:46:34 +05:30
parent d30471f5a9
commit a1a8ac42a6
2 changed files with 103 additions and 32 deletions
@@ -1,41 +1,71 @@
-import { FC, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {FC, useState} from "react";
+import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
+import {oneDark, oneLight} from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {IconDownload} from '@tabler/icons-react';
+import {generateRandomString, programmingLanguages} from '@/utils/app/data';

 interface Props {
-  language: string;
-  value: string;
-  lightMode: "light" | "dark";
+    language: string;
+    value: string;
+    lightMode: "light" | "dark";
 }

-export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
-  const [buttonText, setButtonText] = useState("Copy code");
+export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
+    const [buttonText, setButtonText] = useState("Copy code");

-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(value).then(() => {
-      setButtonText("Copied!");
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(value).then(() => {
+            setButtonText("Copied!");

-      setTimeout(() => {
-        setButtonText("Copy code");
-      }, 2000);
-    });
-  };
+            setTimeout(() => {
+                setButtonText("Copy code");
+            }, 2000);
+        });
+    };
+    const downloadAsFile = () => {
+        const fileExtension = programmingLanguages[language] || '.file';
+        const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
+        const fileName = window.prompt('Enter file name', suggestedFileName);

-  return (
-    <div className="relative text-[16px] pt-2">
-      <SyntaxHighlighter
-        language={language}
-        style={lightMode === "light" ? oneLight : oneDark}
-      >
-        {value}
-      </SyntaxHighlighter>
+        if(!fileName){
+            // user pressed cancel on prompt
+            return;
+        }

-      <button
-        className="absolute top-[-8px] right-[0px] text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
-        onClick={copyToClipboard}
-      >
-        {buttonText}
-      </button>
-    </div>
-  );
+        const blob = new Blob([value], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.download = fileName;
+        link.href = url;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    };
+    return (
+        <div className="relative text-[16px]">
+            <div className="flex items-center justify-end">
+                <button
+                    className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
+                    onClick={copyToClipboard}
+                >
+                    {buttonText}
+                </button>
+                <button
+                    className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
+                    onClick={downloadAsFile}
+                >
+                    <IconDownload size={16}/>
+                </button>
+            </div>
+
+            <SyntaxHighlighter
+                language={language}
+                style={lightMode === "light" ? oneLight : oneDark}
+            >
+                {value}
+            </SyntaxHighlighter>
+        </div>
+    );
 };