fix: download not working

src/components/Card.tsx

@@ -9,6 +9,24 @@ interface Props {
 }
 
 export default function Card({ title, content, id, downloads }: Props) {
+    function download(path: URL, fileName = 'file') {
+        fetch(path)
+            .then((response) => response.blob())
+            .then((blob) => {
+                const url = window.URL.createObjectURL(new Blob([blob]))
+
+                const link = document.createElement('a')
+                link.href = url
+                link.download = fileName
+
+                document.body.appendChild(link)
+
+                link.click()
+
+                link.parentNode?.removeChild(link)
+            })
+    }
+
     return (
         <div className="bg-[#161718] w-lg p-5 flex flex-col gap-5 rounded-xl self-center">
             <h1 className="text-white text-2xl font-bold" id={id?.toString()}>
@@ -24,10 +42,11 @@ export default function Card({ title, content, id, downloads }: Props) {
                         {downloads.map((e, i) => (
                             <li>
                                 <a
-                                    href={e.link}
+                                    href={e.link.toString()}
                                     key={i}
                                     download={e.filename}
                                     className="text-sky-600 underline"
+                                    onClick={() => download(e.link, e.filename)}
                                 >
                                     {e.title}
                                 </a>

src/types/cards.tsx

@@ -1,7 +1,7 @@
 export type CardDownloadType = {
     title: string
     filename: string
-    link: string
+    link: URL
 }
 
 export type CardType = {