refactor: replace download handling with ButtonLink for direct file downloads

Author: corwintines

src/components/AssetDownload/index.tsx

@@ -5,7 +5,7 @@ import type { ImageProps, StaticImageData } from "next/image"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
-import { Button } from "@/components/ui/buttons/Button"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Flex, Stack } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -41,40 +41,8 @@ const AssetDownload = ({
     })
   }
 
-  const handleDownload = async (url: string, fileExtension: string) => {
-    if (!url) return
-
-    matomoHandler()
-
-    try {
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const blobUrl = window.URL.createObjectURL(blob)
-      const link = document.createElement("a")
-      link.href = blobUrl
-      link.download = `${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-      window.URL.revokeObjectURL(blobUrl)
-    } catch (error) {
-      console.error("Failed to download file:", error)
-    }
-  }
-
-  const handleSvgDownload = () => {
-    if (!svgUrl) return
-    handleDownload(svgUrl, "svg")
-  }
-
-  const handleImageDownload = () => {
-    const imgSrc = (image as StaticImageData).src
-    if (!imgSrc) return
-    const fileExt = extname(imgSrc).slice(1)
-    handleDownload(imgSrc, fileExt)
-  }
-
   const imgSrc = (image as StaticImageData).src
+  const fileExtension = extname(imgSrc).slice(1)
 
   return (
     <Stack
@@ -89,14 +57,21 @@ const AssetDownload = ({
         )}
       </div>
       <Flex className="mt-4 gap-5">
-        <Button onClick={handleImageDownload}>
-          {t("page-assets-download-download")} (
-          {extname(imgSrc).slice(1).toUpperCase()})
-        </Button>
+        <ButtonLink
+          href={imgSrc}
+          onClick={matomoHandler}
+          download={`${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`}
+        >
+          {t("page-assets-download-download")} ({fileExtension.toUpperCase()})
+        </ButtonLink>
         {svgUrl && (
-          <Button onClick={handleSvgDownload}>
+          <ButtonLink
+            href={svgUrl}
+            onClick={matomoHandler}
+            download={`${title.replace(/\s+/g, "-").toLowerCase()}.svg`}
+          >
             {t("page-assets-download-download")} (SVG)
-          </Button>
+          </ButtonLink>
         )}
       </Flex>
     </Stack>