From 80fa3d1842cad0ee6b99fcfd731e526e65dc8b55 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Wed, 3 Jul 2024 19:58:38 +0200 Subject: [PATCH] feat: Add @radix-ui/react-tabs npm dependency and update header.tsx to include a download link --- package-lock.json | 60 ++++++++++++++++++++++ package.json | 1 + src/app/download/page.tsx | 14 ++++++ src/components/download.tsx | 95 +++++++++++++++++++++++++++++++++++ src/components/header.tsx | 6 ++- src/components/navigation.tsx | 2 +- src/components/ui/tabs.tsx | 55 ++++++++++++++++++++ 7 files changed, 230 insertions(+), 3 deletions(-) create mode 100644 src/app/download/page.tsx create mode 100644 src/components/download.tsx create mode 100644 src/components/ui/tabs.tsx diff --git a/package-lock.json b/package-lock.json index d2dac98..44abce0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-navigation-menu": "^1.2.0", + "@radix-ui/react-tabs": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cobe": "^0.6.3", @@ -2966,6 +2967,36 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -2983,6 +3014,35 @@ } } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz", + "integrity": "sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", diff --git a/package.json b/package.json index 47bba1b..e8aea4a 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-navigation-menu": "^1.2.0", + "@radix-ui/react-tabs": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cobe": "^0.6.3", diff --git a/src/app/download/page.tsx b/src/app/download/page.tsx new file mode 100644 index 0000000..ce92777 --- /dev/null +++ b/src/app/download/page.tsx @@ -0,0 +1,14 @@ + +import DownloadPage from "@/components/download"; +import Footer from "@/components/footer"; +import { Navigation } from "@/components/navigation"; + +export default function Download() { + return ( +
+ +
+ {/* At the bottom of the page */} +
+ ); +} diff --git a/src/components/download.tsx b/src/components/download.tsx new file mode 100644 index 0000000..b966987 --- /dev/null +++ b/src/components/download.tsx @@ -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 ( +
+
+ +

+ Download Zen Browser +

+

+ Get started with Zen Browser today. Get back to browsing the web with peace of mind. +

+
+
+ + + {Object.keys(releases).map((platform) => ( + {platform} + ))} + + {Object.keys(releases).map((platform) => ( + + + + + + + + + + {releases[platform].map((release: string) => ( + + + + + ))} + +
FileDownload
{release} + + + +
+ + ))} + +
+
+ ); +} diff --git a/src/components/header.tsx b/src/components/header.tsx index 7b6c1f9..25700b5 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -26,7 +26,8 @@ export default function Header() { 'w-full z-0', )} /> -
+
+ 🎉 {' '} @@ -41,6 +42,7 @@ export default function Header() { +
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index 1662454..6419613 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -30,7 +30,7 @@ const components: { title: string; href: string; description: string }[] = [ export function Navigation() { return ( -
+
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..120a5f3 --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,55 @@ +'use client' + +import * as React from 'react' +import * as TabsPrimitive from '@radix-ui/react-tabs' + +import { ny } from '@/lib/utils' + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent }