Merge pull request #138 from ktz-dev/enjson
feat: Full en.json and translating the navbar as a POC
This commit is contained in:
mauro 🤙
@@ -11,9 +11,18 @@ import { ScrollArea } from './ui/scroll-area'
|
||||
import Logo from './logo'
|
||||
import { ny } from '@/lib/utils'
|
||||
import { components } from './navigation'
|
||||
import { useTranslations } from 'next-intl'
|
||||
|
||||
export function MobileNav() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const t = useTranslations('mobile-nav');
|
||||
const t2 = useTranslations('navigation');
|
||||
|
||||
const translatedComponents = components.map(component => ({
|
||||
title: t2(component.titleKey),
|
||||
href: component.href,
|
||||
description: t2(component.descriptionKey),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
@@ -25,7 +34,7 @@ export function MobileNav() {
|
||||
className="mr-2 px-0 ml-auto text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
>
|
||||
<SidebarOpen className="size-6" />
|
||||
<span className="sr-only">Toggle Menu</span>
|
||||
<span className="sr-only">{t('mobile-menu-button')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</SheetTrigger>
|
||||
@@ -43,27 +52,27 @@ export function MobileNav() {
|
||||
href="/download"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Download
|
||||
{t('mobile-download-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="/themes"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Theme Store
|
||||
{t('mobile-theme-store-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="/release-notes"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Release Notes
|
||||
{t('mobile-release-notes-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Donate {"<"}3
|
||||
{t('mobile-donate-link')} {"<"}3
|
||||
</MobileLink>
|
||||
{components.map(({title, href, description}) => (
|
||||
{translatedComponents.map(({title, href, description}) => (
|
||||
<MobileLink
|
||||
href={href}
|
||||
key={href}
|
||||
|
||||
@@ -20,31 +20,31 @@ import { HeartIcon } from "lucide-react"
|
||||
import { HeartFilledIcon } from "@radix-ui/react-icons"
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export const components: { title: string; href: string; description: string }[] = [
|
||||
export const components: { titleKey: string; href: string; descriptionKey: string }[] = [
|
||||
{
|
||||
title: "Privacy Policy",
|
||||
titleKey: "nav-components-privacy-policy",
|
||||
href: "/privacy-policy",
|
||||
description: "Learn how we handle your data. Don't worry, we don't collect anything!",
|
||||
descriptionKey: "nav-components-privacy-policy-text",
|
||||
},
|
||||
{
|
||||
title: "Discord",
|
||||
titleKey: "nav-components-discord",
|
||||
href: "https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748",
|
||||
description: "Join our Discord server to chat with the community."
|
||||
descriptionKey: "nav-components-discord-text"
|
||||
},
|
||||
{
|
||||
title: "Source Code",
|
||||
titleKey: "nav-components-source-code",
|
||||
href: "https://github.com/zen-browser",
|
||||
description: "Check out our source code on GitHub and leave a star!"
|
||||
descriptionKey: "nav-components-source-code-text"
|
||||
},
|
||||
{
|
||||
title: "Branding Assets",
|
||||
titleKey: "nav-components-branding-assets",
|
||||
href: "/branding-assets",
|
||||
description: "Download Zen Browser branding assets for your website or project."
|
||||
descriptionKey: "nav-components-branding-assets-text"
|
||||
},
|
||||
{
|
||||
title: "Documentation",
|
||||
titleKey: "nav-components-documentation",
|
||||
href: "https://docs.zen-browser.app/",
|
||||
description: "Learn how to use Zen Browser and build your own themes."
|
||||
descriptionKey: "nav-components-documentation-text"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -52,6 +52,14 @@ export function Navigation() {
|
||||
|
||||
const t = useTranslations('navigation');
|
||||
|
||||
const translatedComponents = components.map(component => ({
|
||||
title: t(component.titleKey),
|
||||
href: component.href,
|
||||
description: t(component.descriptionKey),
|
||||
}));
|
||||
|
||||
console.log(translatedComponents);
|
||||
|
||||
return (
|
||||
<div className="bg-background z-40 top-0 left-0 w-full flex fixed border-b border-grey p-2 items-center justify-center">
|
||||
<MobileNav />
|
||||
@@ -63,7 +71,7 @@ export function Navigation() {
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>{t('getting-started')}</NavigationMenuTrigger>
|
||||
<NavigationMenuTrigger>{t('nav-getting-started')}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
|
||||
<li className="row-span-3">
|
||||
@@ -74,23 +82,22 @@ export function Navigation() {
|
||||
>
|
||||
<Logo />
|
||||
<div className="mb-2 mt-4 text-lg font-medium">
|
||||
Zen Browser
|
||||
{t('nav-gs-zen-heading')}
|
||||
</div>
|
||||
<p className="text-sm leading-tight text-muted-foreground">
|
||||
Firefox based browser with a focus on privacy and
|
||||
customization.
|
||||
{t('nav-gs-zen-text')}
|
||||
</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<ListItem href="/download" title="Download">
|
||||
Start using Zen Browser today with just a few clicks.
|
||||
<ListItem href="/download" title={t('nav-gs-download-li')}>
|
||||
{t('nav-gs-download-li-text')}
|
||||
</ListItem>
|
||||
<ListItem href="/themes" title="Themes Store">
|
||||
Customize your browser with a variety of themes!
|
||||
<ListItem href="/themes" title={t('nav-gs-themes-li')}>
|
||||
{t('nav-gs-themes-li-text')}
|
||||
</ListItem>
|
||||
<ListItem href="/release-notes" title="Release Notes">
|
||||
Stay up to date with the latest changes.
|
||||
<ListItem href="/release-notes" title={t('nav-gs-release-li')}>
|
||||
{t('nav-gs-release-text')}
|
||||
</ListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
@@ -98,30 +105,30 @@ export function Navigation() {
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>
|
||||
<HeartFilledIcon className="text-red-500" />
|
||||
<span className="ml-2">{t('donate')}</span>
|
||||
<span className="ml-2">{t('nav-donate')}</span>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||
<ListItem
|
||||
title="Patreon"
|
||||
title={t('nav-donate-patreon-li')}
|
||||
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
>
|
||||
Support us on Patreon and get exclusive rewards and keep the project alive.
|
||||
{t('nav-donate-patreon-li-text')}
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title="Ko-fi"
|
||||
title={t('nav-donate-ko-fi-li')}
|
||||
href="https://ko-fi.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
>
|
||||
Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
|
||||
{t('nav-donate-ko-fi-li-text')}
|
||||
</ListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>{t('useful-links')}</NavigationMenuTrigger>
|
||||
<NavigationMenuTrigger>{t('nav-useful-links')}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||
{components.map((component) => (
|
||||
{translatedComponents.map((component) => (
|
||||
<ListItem
|
||||
key={component.title}
|
||||
title={component.title}
|
||||
|
||||
Reference in New Issue
Block a user