add button to download svg

Author: lokesh-coder

src/components/actions/svgCopy.jsx

@@ -5,9 +5,11 @@ import { appStore } from "../../store";
 import Modal from "../common/modal";
 import Highlight from "../common/highlight";
 import Copy from "../common/ copy";
+import Download from "../common/download";
 
 const SVGCopy = view(({ onClose }) => {
   const [isModalOpen, openModal] = useState(false);
+  const ID = `${appStore.edges}-${appStore.growth}-${appStore.id}`;
   const code = `
   <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
     <path d="${appStore.path}"></path>
@@ -26,6 +28,7 @@ const SVGCopy = view(({ onClose }) => {
       </Button>
       <Modal isOpen={isModalOpen} onClose={() => openModal(false)}>
         <div className="flex justify-end">
+          <Download content={code} filename={`blob_${ID}.svg`} />
           <Copy text={code} />
         </div>
         <Highlight code={code} lang={"markup"} />

src/components/common/download.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function Download({ content, filename }) {
+  const downloadFile = () => {
+    const url = window.URL.createObjectURL(new Blob([content]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", filename);
+    document.body.appendChild(link);
+    link.click();
+  };
+  return (
+    <div
+      className="font-medium leading-none cursor-pointer text-gray-500 hover:bg-gray-300 hover:text-gray-600 p-2 rounded-md flex items-center"
+      onClick={() => downloadFile()}
+    >
+      <i className="ri-download-line text-lg mr-1"></i> <span>Download</span>
+    </div>
+  );
+}