gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(website): architecture switcher for download

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 01:01:06 +03:00
parent 818efe7fb0
commit 70afb636ca
No known key found for this signature in database
2 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/website2/src/pages/Download/download.css
View File

@ -37,4 +37,32 @@
.download-server {
width: 75%;
margin: auto;
}
.architecture-switch {
display: flex;
gap: 1em;
justify-content: center;
align-items: center;
margin: 1em 0;
}
.architecture-switch a {
display: inline-block;
background: var(--card-background-color);
padding: 0.25em 0.5em;
text-decoration: none;
text-align: center;
min-width: 3em;
color: inherit;
}
.architecture-switch .toggle-wrapper {
border-radius: calc(infinity * 1px);
overflow: hidden;
}
.architecture-switch a.active {
background-color: var(--brand-1);
color: inherit;
}

20
apps/website2/src/pages/Download/download.tsx
View File

@ -5,19 +5,33 @@ import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntr
import "./download.css";
export default function DownloadPage() {
const [ arch, setArch ] = useState(getArchitecture());
const [ currentArch, setCurrentArch ] = useState(getArchitecture());
return (
<>
<Section title="Download the desktop application">
<div className="architecture-switch">
<span>Architecture:</span>
<div class="toggle-wrapper">
{(["x64", "arm64"] as const).map(arch => (
<a
href="#"
className={`arch ${arch === currentArch ? "active" : ""}`}
onClick={() => setCurrentArch(arch)}
>{arch}</a>
))}
</div>
</div>
<div className="grid-3-cols download-desktop">
{Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={arch} entry={entry} />)}
{Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={currentArch} entry={entry} />)}
</div>
</Section>
<Section title="Set up a server for access on multiple devices">
<div className="grid-2-cols download-server">
{Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={arch} entry={entry} />)}
{Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
</div>
</Section>
</>