audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-07 20:06:50 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Convert download button into react component

Browse Source
This commit is contained in:
Dilson's Pickles
2023-02-15 17:26:01 +00:00
parent 5772688280
commit 77da24b542
2 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/button/PrimaryDownloadButton.jsx Normal file
View File

@@ -0,0 +1,42 @@
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
function PrimaryDownloadButton(props) {
const { buttonText } = props;
const [browserOS, setBrowserOS] = useState("");
useEffect(() => {
if (navigator.platform.indexOf("Mac") > -1) {
setBrowserOS("Download for Mac OS");
} else if (navigator.platform.indexOf("Win") > -1) {
setBrowserOS("Download for Windows");
} else if (navigator.platform.indexOf("Lin") > -1) {
setBrowserOS("Download for Linux");
} else if (navigator.platform.indexOf("iPhone") > -1) {
setBrowserOS("Your're on a Mobile!");
}
}, []);
// "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-universal.dmg"
// "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-win-3.2.4-x64.exe"
// "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-linux-3.2.4-x64.AppImage"
return (
<motion.button
className="flex w-fit gap-x-3 items-center rounded-md px-3 h-10 bg-blue-700 text-white mt-4"
whileHover={{ scale: 1.15 }}
>
<svg
className="w-4 fill-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
</svg>
{browserOS}
</motion.button>
);
}
export default PrimaryDownloadButton;

37
src/pages/index.astro
View File

@@ -5,7 +5,7 @@ import ReleaseVideo from "../components/ReleaseVideo.astro";
import AudacityLight from "../assets/img/AudacityLight.png";
import AudacityDark from "../assets/img/AudacityDark.png";
import Card from "../components/Card.astro";
import { Icon } from "astro-icon";
import PrimaryDownloadButton from "../components/button/PrimaryDownloadButton";
interface Frontmatter {
title: string;
@@ -48,21 +48,7 @@ const posts = await Astro.glob<Frontmatter>("./posts/*.md");
A compelling and well rationalised value proposition statement for
music producers that converts them.
</p>
<button class="mt-4 sm:mt-6 lg:mt-8 text-sm sm:text-base flex h-10 sm:h-11 items-center px-3 bg-blue-700 hover:bg-blue-600 text-white w-fit rounded-md shadow-xl">
<span
><Icon
class="w-4 h-4 text-white"
pack="fa"
name="download"
/></span
>
<a
id="downloadButton"
href=""
class="ml-3"
>Download
</a>
</button>
<PrimaryDownloadButton buttonText="Download" client:only />
</div>
</div>
</section>
@@ -100,25 +86,6 @@ const posts = await Astro.glob<Frontmatter>("./posts/*.md");
</main>
</Layout>
<!-- Detect OS and provide appropriate download link -->
<script>
if (navigator.platform.indexOf("Mac") > -1) {
document.getElementById("downloadButton").href =
"https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-universal.dmg";
document.getElementById("downloadButton").innerHTML = "Download for Mac";
} else if (navigator.platform.indexOf("Win") > -1) {
document.getElementById("downloadButton").href =
"https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-win-3.2.4-x64.exe";
document.getElementById("downloadButton").innerHTML =
"Download for Windows";
} else if (navigator.platform.indexOf("Lin") > -1) {
document.getElementById("downloadButton").href =
"https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-linux-3.2.4-x64.AppImage";
document.getElementById("downloadButton").innerHTML = "Download for Linux";
}
</script>
<style>
.grid-background {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath opacity='0.8' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");