joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #126 from aashirwadRunjan/runjan/feature

Browse Source 
Changes in Download Page.
This commit is contained in:
mauro 🤙
2024-09-03 15:45:31 +02:00
committed by GitHub
parent 06f0dfa945 5713ee20d1
commit 5af5016516
2 changed files with 96 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@@ -19991,4 +19991,4 @@
} }
} }
} }
} }

173
src/components/download.tsx
View File

@@ -259,6 +259,7 @@ export default function DownloadPage() {
</p> </p>
</> </>
)} )}
{/*Changes for the Choose your platform as checkbox looks old*/}
<div className="relative w-full"> <div className="relative w-full">
{platform === null && ( {platform === null && (
<FormField enter={platform === null} out={platform !== null}> <FormField enter={platform === null} out={platform !== null}>
@@ -266,39 +267,61 @@ export default function DownloadPage() {
<FieldDescription> <FieldDescription>
Choose the platform you want to download Zen for. Choose the platform you want to download Zen for.
</FieldDescription> </FieldDescription>
<div <div className="flex">
onClick={() => setSelectedPlatform("Windows")} <div
className={ny( onClick={() => setSelectedPlatform("Windows")}
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", className={ny(
selectedPlatform === "Windows" ? "border-blue-400" : "" "select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
)} selectedPlatform === "Windows" ? "border-blue-400" : ""
> )}
<Checkbox checked={selectedPlatform === "Windows"} /> style={{
<i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i> height: "11.25rem",
<div className="ml-2">Windows</div> width: "18.75rem",
</div> }}
<div >
onClick={() => setSelectedPlatform("Linux")} <i
className={ny( className="devicon-windows8-original p-2 border border-blue-400 rounded-lg"
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", style={{ marginBottom: "10px" }}
selectedPlatform === "Linux" ? "border-yellow-400" : "" ></i>
)} <div className="font-bold">Windows</div>
> </div>
<Checkbox checked={selectedPlatform === "Linux"} />
<i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i> <div
<div className="ml-2">Linux</div> onClick={() => setSelectedPlatform("Linux")}
</div> className={ny(
<div "select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
onClick={() => setSelectedPlatform("MacOS")} selectedPlatform === "Linux" ? "border-yellow-400" : ""
className={ny( )}
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", style={{
selectedPlatform === "MacOS" ? "border-purple-400" : "" height: "11.25rem",
)} width: "18.75rem",
> }}
<Checkbox checked={selectedPlatform === "MacOS"} /> >
<i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i> <i
<div className="ml-2 font-bold">MacOS</div> className="devicon-linux-plain p-2 border border-yellow-400 rounded-lg"
</div> style={{ marginBottom: "10px" }}
></i>
<div className="font-bold">Linux</div>
</div>
<div
onClick={() => setSelectedPlatform("MacOS")}
className={ny(
"select-none flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "MacOS" ? "border-purple-400" : ""
)}
style={{
height: "11.25rem",
width: "18.75rem",
}}
>
<i
className="devicon-apple-original p-2 border border-purple-400 rounded-lg"
style={{ marginBottom: "10px" }}
></i>
<div className="font-bold">MacOS</div>
</div>
</div>
</FormField> </FormField>
)} )}
{/* Architecture */} {/* Architecture */}
@@ -358,51 +381,45 @@ export default function DownloadPage() {
</div> </div>
</FormField> </FormField>
)} )}
{platform === "MacOS" && flowIndex === 1 && ( {platform === "MacOS" && flowIndex === 1 && (
<FormField <FormField
enter={platform === "MacOS"} enter={platform === "MacOS"}
out={platform !== "MacOS"} out={platform !== "MacOS"}
> >
<FieldTitle>Download Zen for MacOS</FieldTitle> <FieldTitle>Download Zen for MacOS</FieldTitle>
<FieldDescription> <FieldDescription>
Click the button below to download Zen for MacOS. Click the button below to download Zen for MacOS.
</FieldDescription> </FieldDescription>
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div <div
onClick={() => setSelectedArchitecture("specific")} onClick={() => setSelectedArchitecture("specific")}
className={ny( className={ny(
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", "select-none w-full h-64 mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
selectedArchitecture === "specific" selectedArchitecture === "specific" ? "border-blue-400" : ""
? "border-blue-400" )}
: "" >
)} <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">🍏</h1>
> <h1 className="text-2xl font-semibold my-2">AArch64</h1>
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20"> <p className="text-muted-foreground mx-auto text-center">
🍏 64-bit ARM architecture, for Apple's M Series Chips
</h1> </p>
<h1 className="text-2xl font-semibold my-2">AArch64</h1> </div>
<p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p> <div
</div> onClick={() => setSelectedArchitecture("generic")}
<div className={ny(
onClick={() => setSelectedArchitecture("generic")} "select-none w-full h-64 mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
className={ny( selectedArchitecture === "generic" ? "border-blue-400" : ""
"select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", )}
selectedArchitecture === "generic" >
? "border-blue-400" <h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20">x64</h1>
: "" <h1 className="text-2xl font-semibold my-2">Intel</h1>
)} <p className="text-muted-foreground mx-auto text-center">
> 64-bit Intel architecture, for older Macs
<h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20"> </p>
x64 </div>
</h1> </div>
<h1 className="text-2xl font-semibold my-2">Intel</h1> </FormField>
<p className="text-muted-foreground mx-auto text-center"> )}
64-bit Intel architecture, for older Macs
</p>
</div>
</div>
</FormField>
)}
{flowIndex === 2 && platform === "Windows" && ( {flowIndex === 2 && platform === "Windows" && (
<FormField <FormField
enter={platform === "Windows" && flowIndex === 2} enter={platform === "Windows" && flowIndex === 2}