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.
This commit is contained in:
Aashirwadrunjan
551
package-lock.json
generated
551
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -34,7 +34,7 @@
|
|||||||
"feed": "^4.2.2",
|
"feed": "^4.2.2",
|
||||||
"framer-motion": "^11.3.24",
|
"framer-motion": "^11.3.24",
|
||||||
"lucide-react": "^0.400.0",
|
"lucide-react": "^0.400.0",
|
||||||
"next": "14.2.4",
|
"next": "^14.2.4",
|
||||||
"next-themes": "^0.3.0",
|
"next-themes": "^0.3.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
@@ -42,6 +42,7 @@
|
|||||||
"react-markdown": "^9.0.1",
|
"react-markdown": "^9.0.1",
|
||||||
"react-spring": "^9.7.4",
|
"react-spring": "^9.7.4",
|
||||||
"react-sticky-el": "^2.1.0",
|
"react-sticky-el": "^2.1.0",
|
||||||
|
"sharp": "^0.33.5",
|
||||||
"styled-components": "^6.1.12",
|
"styled-components": "^6.1.12",
|
||||||
"tailwind-merge": "^2.5.1",
|
"tailwind-merge": "^2.5.1",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
|||||||
@@ -261,6 +261,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}>
|
||||||
@@ -268,39 +269,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 */}
|
||||||
@@ -369,40 +392,35 @@ export default function DownloadPage() {
|
|||||||
<FieldDescription>
|
<FieldDescription>
|
||||||
Click the button below to download Zen for MacOS.
|
Click the button below to download Zen for MacOS.
|
||||||
</FieldDescription>
|
</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 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>
|
|
||||||
<p className="text-muted-foreground mx-auto text-center">
|
|
||||||
64-bit Intel architecture, for older Macs
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</FormField>
|
</FormField>
|
||||||
)}
|
)}
|
||||||
{flowIndex === 2 && platform === "Windows" && (
|
{flowIndex === 2 && platform === "Windows" && (
|
||||||
|
|||||||
Reference in New Issue
Block a user