made buttons work

README.md

@@ -2,11 +2,11 @@
 
 ## Todos v1.5
 
-- [ ] Actually make the buttons work for download and regenerate
 - [ ] Add some sample prompts
   - [ ] a city view with clouds
   - [ ] A beautiful landscape photo of a glacier, in the style of ansel adams
 - [ ] Add 3-6 quick themes
+- [ ] Clean up codebase: remove the multi thing
 
 ## Todos v2
 

app/start/page.tsx

@@ -23,6 +23,7 @@ import { QrCard } from '@/components/QrCard';
 import { AlertCircle } from 'lucide-react';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 import LoadingDots from '@/components/ui/loadingdots';
+import downloadQrCode from '@/utils/downloadQrCode';
 
 const generateFormSchema = z.object({
   url: z.string(),
@@ -154,8 +155,19 @@ const GeneratePage: NextPage = () => {
                   <div className="animate-pulse bg-gray-200 aspect-square rounded w-[552px] h-[580px]" />
                 )}
                 <div className="flex justify-center gap-5">
-                  <Button>Download</Button>
-                  <Button variant="outline">✨ Regenerate</Button>
+                  <Button
+                    onClick={() =>
+                      downloadQrCode(response?.image_urls[0]!, 'qrCode')
+                    }
+                  >
+                    Download
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={form.handleSubmit(handleSubmit)}
+                  >
+                    ✨ Regenerate
+                  </Button>
                 </div>
               </div>
             </>

utils/downloadQrCode.ts

@@ -0,0 +1,23 @@
+function forceDownload(blobUrl: string, filename: string) {
+  let a: any = document.createElement('a');
+  a.download = filename;
+  a.href = blobUrl;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+export default function downloadQrCode(url: string, filename: string) {
+  fetch(url, {
+    headers: new Headers({
+      Origin: location.origin,
+    }),
+    mode: 'cors',
+  })
+    .then((response) => response.blob())
+    .then((blob) => {
+      let blobUrl = window.URL.createObjectURL(blob);
+      forceDownload(blobUrl, filename);
+    })
+    .catch((e) => console.error(e));
+}