feat: Add @radix-ui/react-tabs npm dependency and update header.tsx to include a download link

This commit is contained in:
Mauro Balades 2024-07-03 19:58:38 +02:00
parent acebd412e7
commit 80fa3d1842
7 changed files with 230 additions and 3 deletions

View file

@ -0,0 +1,95 @@
"use client";
import { ny } from "@/lib/utils";
import GridPattern from "./ui/grid-pattern";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { DownloadCloudIcon, DownloadIcon } from "lucide-react";
const BASE_URL = "https://github.com/zen-browser/desktop/releases/download/latest";
const releases: any = {
Windows: [
"zen.win64.zip",
],
//MacOS: [],
Linux: [
"zen.linux.tar.bz2",
],
};
function getDefaultPlatformBasedOnUserAgent() {
const userAgent = navigator.userAgent;
if (userAgent.includes("Win")) {
return "Windows";
}
if (userAgent.includes("Mac")) {
return "MacOS";
}
if (userAgent.includes("Linux")) {
return "Linux";
}
return "Windows";
}
export default function DownloadPage() {
return (
<div className="w-full relative h-screen flex items-center justify-center">
<div className="w-1/2 relative h-full px-64 flex items-cetner justify-center flex-col">
<GridPattern
numSquares={30}
maxOpacity={0.5}
height={50}
width={50}
duration={3}
repeatDelay={1}
x={-1}
y={-1}
strokeDasharray="4 2"
className={ny(
'[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]',
'w-full z-0',
)}
/>
<h1 className="!text-4xl font-bold tracking-[-0.02em] text-black dark:text-white md:text-7xl md:leading-[5rem]">
Download Zen Browser
</h1>
<p className="!text-md text-muted-foreground !font-medium">
Get started with Zen Browser today. Get back to browsing the web with peace of mind.
</p>
</div>
<div className="w-1/2 relative flex items-cetner justify-start">
<Tabs defaultValue={getDefaultPlatformBasedOnUserAgent()} className="mx-auto w-fit flex flex-col items-start justify-center">
<TabsList>
{Object.keys(releases).map((platform) => (
<TabsTrigger key={platform} value={platform}>{platform}</TabsTrigger>
))}
</TabsList>
{Object.keys(releases).map((platform) => (
<TabsContent key={platform} value={platform} className="border rounded-md p-5 border-gray">
<table>
<thead className="">
<tr>
<th className="text-start pb-4 min-w-64">File</th>
<th className="text-start pb-4">Download</th>
</tr>
</thead>
<tbody>
{releases[platform].map((release: string) => (
<tr key={release} className="relative w-full">
<td className="min-w-64">{release}</td>
<td className="flex items-center w-full justify-center">
<a href={`${BASE_URL}/${release}`} className="text-blue-500">
<DownloadIcon size={24} />
</a>
</td>
</tr>
))}
</tbody>
</table>
</TabsContent>
))}
</Tabs>
</div>
</div>
);
}