feat: Translating only navbar as POC
This commit is contained in:
Waled Khatiz
@@ -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.gg/nnShMQzR4b",
|
||||
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