feat(website/download): integrate architecture selector

This commit is contained in:
Elian Doran 2025-06-14 14:24:59 +03:00
parent 68dc81ac96
commit 668706a6d9
No known key found for this signature in database
2 changed files with 12 additions and 15 deletions

View File

@ -66,7 +66,7 @@ export const downloadMatrix = {
} }
}; };
function getArchitecture(): Architecture { export function getArchitecture(): Architecture {
const userAgent = navigator.userAgent.toLowerCase(); const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('arm64') || userAgent.includes('aarch64')) { if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
return 'arm64'; return 'arm64';

View File

@ -1,7 +1,7 @@
<script> <script>
import { downloadMatrix } from "$lib/download-helper"; import { downloadMatrix, getArchitecture } from "$lib/download-helper";
let architecture = 'x64'; let architecture = getArchitecture();
</script> </script>
<section class="mt-20 max-w-6xl mx-auto px-4"> <section class="mt-20 max-w-6xl mx-auto px-4">
@ -11,17 +11,14 @@
<div class="col-span-3 flex justify-center items-center gap-3 mb-6"> <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
<span class="text-gray-600 font-medium mr-2">Architecture:</span> <span class="text-gray-600 font-medium mr-2">Architecture:</span>
<div class="inline-flex bg-violet-100 rounded-full shadow p-1"> <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
{#each ["x64", "arm64"] as arch}
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
text-violet-100 bg-violet-700 shadow text-violet-700 border-violet-700
aria-pressed:bg-violet-700 aria-pressed:text-violet-100 aria-pressed:bg-violet-700 aria-pressed:text-violet-100
" aria-pressed="true"> " aria-pressed={architecture === arch} on:click={() => architecture = arch}>
x86 {arch}
</button>
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
text-violet-700 bg-transparent hover:bg-violet-200
" aria-pressed="false">
ARM
</button> </button>
{/each}
</div> </div>
</div> </div>
@ -29,7 +26,7 @@
{#each Object.values(downloadMatrix.desktop) as platform} {#each Object.values(downloadMatrix.desktop) as platform}
<div class="bg-white rounded-xl shadow overflow-hidden"> <div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-2">{platform.title}</h3> <h3 class="text-xl font-semibold mb-2">{platform.title} ({architecture})</h3>
<div class="flex flex-wrap gap-y-2"> <div class="flex flex-wrap gap-y-2">
{#each Object.values(platform.downloads) as download} {#each Object.values(platform.downloads) as download}
<a href={download[architecture]} class={ <a href={download[architecture]} class={