feat(website): improve download button with icon and platform title

This commit is contained in:
Elian Doran 2025-09-27 12:41:33 +03:00
parent 65dae511e5
commit 7a73af0299
No known key found for this signature in database
6 changed files with 22 additions and 14 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M11 3v7H7l5 6 5-6h-4V3z"/><path d="M19 19H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2z"/></svg>

After

Width:  |  Height:  |  Size: 253 B

View File

@ -6,4 +6,5 @@ a.button {
color: var(--brand-foreground-color); color: var(--brand-foreground-color);
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
} }

View File

@ -7,12 +7,13 @@ interface ButtonProps {
iconSvg?: string; iconSvg?: string;
text: ComponentChildren; text: ComponentChildren;
openExternally?: boolean; openExternally?: boolean;
className?: string;
} }
export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) { export default function Button({ href, iconSvg, openExternally, text, className }: ButtonProps) {
return ( return (
<a <a
className="button" className={`button ${className}`}
href={href} href={href}
target={openExternally ? "_blank" : undefined} target={openExternally ? "_blank" : undefined}
> >

View File

@ -1,10 +1,4 @@
.download-button { .download-button {
text-decoration: none;
background: var(--brand-1);
padding: 0.5em 1em;
border-radius: 6px;
color: white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
display: none; display: none;
} }

View File

@ -1,17 +1,24 @@
import { getRecommendedDownload } from "../download-helper"; import { getRecommendedDownload } from "../download-helper";
import "./DownloadButton.css"; import "./DownloadButton.css";
import Button from "./Button";
import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
interface DownloadButtonProps { interface DownloadButtonProps {
big?: boolean; big?: boolean;
} }
const { architecture, platform, url } = getRecommendedDownload(); const { name, url } = getRecommendedDownload();
export default function DownloadButton({ big }: DownloadButtonProps) { export default function DownloadButton({ big }: DownloadButtonProps) {
return ( return (
<a className={`download-button ${big ? "big" : ""}`} href={url}> <Button
Download now{" "} className={`download-button ${big ? "big" : ""}`}
<span class="platform">{platform} {architecture}</span> href={url}
</a> iconSvg={downloadIcon}
text={<>
Download now{" "}
<span class="platform">for {name}</span>
</>}
/>
) )
} }

View File

@ -187,9 +187,13 @@ export function getRecommendedDownload() {
const format = recommendedDownload?.[0]; const format = recommendedDownload?.[0];
const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture); const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
const platformTitle = downloadMatrix.desktop[platform].title;
const name = typeof platformTitle === "string" ? platformTitle : platformTitle[architecture];
return { return {
architecture, architecture,
platform, platform,
url url,
name
} }
} }