Refactor download cards

src/assets/js/releaseData.js

@@ -38,21 +38,21 @@ export const releaseData = {
       name: "ARM 64 dmg",
       browser_download_url:
         "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-arm64.dmg",
-      checksum: "?",
+      checksum: null,
       type: ".dmg",
     },
     {
       name: "Universal dmg",
       browser_download_url:
         "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-universal.dmg",
-      checksum: "?",
+      checksum: null,
       type: ".dmg",
     },
     {
       name: "x86_64 dmg",
       browser_download_url:
         "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-x86_64.dmg",
-      checksum: "?",
+      checksum: null,
       type: ".dmg",
     },
   ],
@@ -61,7 +61,7 @@ export const releaseData = {
       name: "AppImage",
       browser_download_url:
         "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-linux-3.2.4-x64.AppImage",
-      checksum: "?",
+      checksum: null,
       type: ".AppImage"
     },
   ],

src/components/card/DownloadCard.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  title: string;
+  checkum: string;
+  buttonText: string;
+  downloadURL: string;
+  downloadType: string;
+}
+const { title, checksum, buttonText, downloadURL, downloadType } =
+  Astro.props as Props;
+---
+
+<div class="border border-bg-200 rounded-md p-6">
+  <div class="flex flex-col sm:flex-row gap-2 justify-between items-center">
+    <h4>{title}</h4>
+    <a
+      href={downloadURL}
+      class="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-slate-200 hover:bg-slate-300 text-base text-black rounded"
+    >
+      {`${buttonText}` + `${downloadType}`}
+    </a>
+  </div>
+
+  {
+    checksum && (
+      <div class="flex flex-col mt-8 border-t pt-4">
+        <label>Checksum:</label>
+        <div class="mt-2 p-2 bg-gray-50 border border-gray-200">
+          <small class="break-words">{checksum}</small>
+        </div>
+      </div>
+    )
+  }
+</div>

src/components/card/DownloadCard.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-
-function DownloadCard(props) {
-  const { title, checksum, buttonText, downloadURL, downloadType } = props;
-  const [isOpen, setIsOpen] = useState(false);
-
-  function showDetailsHandler() {
-    setIsOpen(!isOpen);
-  }
-
-  return (
-    <div className="border border-bg-200 rounded-md p-6">
-      <div className="flex flex-col gap-4 md:flex-row md:justify-between items-center">
-        <h4>{title}</h4>
-        <div class="flex w-full md:w-fit flex-col-reverse text sm:flex-row gap-2">
-          <a
-            onClick={() => showDetailsHandler()}
-            className="hyperlink h-12 px-4 w-full whitespace-nowrap flex items-center justify-center"
-          >
-            {isOpen ?  "Hide checksum" : "Show checksum" }
-          </a>
-          <a
-            href={downloadURL}
-            className="flex justify-center text-center items-center px-4 h-12 w-full bg-slate-200 hover:bg-slate-300 text-base text-black rounded"
-          >
-            {`${buttonText}` + `${downloadType}`}
-          </a>
-        </div>
-      </div>
-
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            className="flex flex-col gap-4 mt-4"
-          >
-            <div>
-              <small>
-                Checksum
-              </small>
-              <div className="p-4 border bg-gray-50">
-                <p className="font-mono text-sm break-words">{checksum}</p>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-export default DownloadCard;

src/layouts/DownloadPageLayout.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-import DownloadCard from "../components/card/DownloadCard";
+import DownloadCard from '../components/card/DownloadCard.astro'
 import IconLinkCard from "../components/card/IconLinkCard";
 import { Icon } from "astro-icon";
 import "../styles/icons.css";