mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
feat(website): architecture switcher for download
This commit is contained in:
parent
818efe7fb0
commit
70afb636ca
@ -38,3 +38,31 @@
|
||||
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;
|
||||
}
|
@ -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>
|
||||
</>
|
||||
|
Loading…
x
Reference in New Issue
Block a user