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

feat: From 264, for the Choose your platform, I tried removing the checkbox and making it to select the div and it looks cooler. fix: The box sizing for Download Zen for macOS for AArch64 and Intel were not consistent like windows and linux.

Browse Source
This commit is contained in:
Aashirwadrunjan
2024-08-28 12:16:39 +05:30
parent 530f69cd6c
commit 19c3d6e4ff
3 changed files with 520 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/download.tsx
View File

@@ -261,6 +261,7 @@ export default function DownloadPage() {
</p>
</>
)}
{/*Changes for the Choose your platform as checkbox looks old*/}
<div className="relative w-full">
{platform === null && (
<FormField enter={platform === null} out={platform !== null}>
@@ -268,39 +269,61 @@ export default function DownloadPage() {
<FieldDescription>
Choose the platform you want to download Zen for.
</FieldDescription>
<div
onClick={() => setSelectedPlatform("Windows")}
className={ny(
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "Windows" ? "border-blue-400" : ""
)}
>
<Checkbox checked={selectedPlatform === "Windows"} />
<i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i>
<div className="ml-2">Windows</div>
</div>
<div
onClick={() => setSelectedPlatform("Linux")}
className={ny(
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "Linux" ? "border-yellow-400" : ""
)}
>
<Checkbox checked={selectedPlatform === "Linux"} />
<i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i>
<div className="ml-2">Linux</div>
</div>
<div
onClick={() => setSelectedPlatform("MacOS")}
className={ny(
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "MacOS" ? "border-purple-400" : ""
)}
>
<Checkbox checked={selectedPlatform === "MacOS"} />
<i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i>
<div className="ml-2 font-bold">MacOS</div>
</div>
<div className="flex">
<div
onClick={() => setSelectedPlatform("Windows")}
className={ny(
"select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "Windows" ? "border-blue-400" : ""
)}
style={{
height: "11.25rem",
width: "18.75rem",
}}
>
<i
className="devicon-windows8-original p-2 border border-blue-400 rounded-lg"
style={{ marginBottom: "10px" }}
></i>
<div className="font-bold">Windows</div>
</div>
<div
onClick={() => setSelectedPlatform("Linux")}
className={ny(
"select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
selectedPlatform === "Linux" ? "border-yellow-400" : ""
)}
style={{
height: "11.25rem",
width: "18.75rem",
}}
>
<i
className="devicon-linux-plain p-2 border border-yellow-400 rounded-lg"
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>
)}
{/* Architecture */}
@@ -369,40 +392,35 @@ export default function DownloadPage() {
<FieldDescription>
Click the button below to download Zen for MacOS.
</FieldDescription>
{/*Fixed the issue where the box height of AArch64 and Intel were not consistent like in the windows and linux*/}
<div className="flex items-center justify-center">
<div
onClick={() => setSelectedArchitecture("specific")}
className={ny(
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
selectedArchitecture === "specific"
? "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>
<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")}
className={ny(
"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
</p>
</div>
</div>
<div
onClick={() => setSelectedArchitecture("specific")}
className={ny(
"select-none w-full h-64 mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
selectedArchitecture === "specific" ? "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>
<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")}
className={ny(
"select-none w-full h-64 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
</p>
</div>
</div>
</FormField>
)}
{flowIndex === 2 && platform === "Windows" && (