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
@ -37,4 +37,32 @@
|
|||||||
.download-server {
|
.download-server {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
margin: auto;
|
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";
|
import "./download.css";
|
||||||
|
|
||||||
export default function DownloadPage() {
|
export default function DownloadPage() {
|
||||||
const [ arch, setArch ] = useState(getArchitecture());
|
const [ currentArch, setCurrentArch ] = useState(getArchitecture());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Section title="Download the desktop application">
|
<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">
|
<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>
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section title="Set up a server for access on multiple devices">
|
<Section title="Set up a server for access on multiple devices">
|
||||||
<div className="grid-2-cols download-server">
|
<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>
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
</>
|
</>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user