asd

Author: GlebkaF

components/PresetDetails.tsx

@@ -2,6 +2,7 @@ import { Preset } from "lib/public/interface";
 import { FC } from "react";
 import { QRCodeCanvas } from "qrcode.react";
 import { encodeChain } from "lib/core/encoder";
+import ChainEditor from "./chain/ChainEditor";
 
 interface PresetDetailsProps {
   preset: Preset;
@@ -55,19 +56,38 @@ export const PresetDetails: FC<PresetDetailsProps> = ({ preset }) => {
           <div className="mt-8">
             <button
               onClick={() => {
-                const element = document.createElement("a");
-                const file = new Blob([qrCode.qrCode], { type: "text/plain" });
-                element.href = URL.createObjectURL(file);
-                element.download = `${preset.origin.artist} - ${preset.origin.song}.txt`;
-                document.body.appendChild(element);
-                element.click();
-                document.body.removeChild(element);
+                const canvas = document.querySelector("canvas");
+                if (!canvas) return;
+
+                canvas.toBlob((blob) => {
+                  if (!blob) return;
+
+                  const element = document.createElement("a");
+                  element.href = URL.createObjectURL(blob);
+                  element.download = `${preset.origin.artist} - ${preset.origin.song} ${preset.origin.part}.png`;
+                  document.body.appendChild(element);
+                  element.click();
+                  document.body.removeChild(element);
+                }, "image/png");
               }}
               className="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded transition-colors"
             >
               Download «{preset.origin.song} {preset.origin.part}» patch file
             </button>
           </div>
+
+          {/* <div className="mt-8">
+            <h2 className="text-2xl font-semibold mb-4 text-left">
+              Chain Configuration
+            </h2>
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
+              <ChainEditor
+                chain={preset.chain}
+                onChange={() => {}}
+                readonly={true}
+              />
+            </div>
+          </div> */}
         </div>
 
         <div className="w-[300px] shrink-0">