diff --git a/components/atoms/locale-switcher/index.tsx b/components/atoms/locale-switcher/index.tsx new file mode 100644 index 0000000..eebe109 --- /dev/null +++ b/components/atoms/locale-switcher/index.tsx @@ -0,0 +1,39 @@ +import { useRouter } from 'next/router' +import { useTranslations } from 'next-intl' +import { locales, type Locale } from '../../../i18n/messages' + +/** + * LocaleSwitcher — switches the active UI language while preserving the current + * route (pathname + query). Relies on Next.js built-in locale routing, so the + * selected locale is reflected in the URL and `useRouter().locale`. + */ +export function LocaleSwitcher() { + const router = useRouter() + const t = useTranslations('LocaleSwitcher') + const active = (router.locale ?? router.defaultLocale) as string + + const onChange = (next: Locale) => { + if (next === active) return + router.push({ pathname: router.pathname, query: router.query }, router.asPath, { + locale: next, + }) + } + + return ( + + ) +} diff --git a/components/organisms/navbar/index.tsx b/components/organisms/navbar/index.tsx index 44aa7d0..0167f0f 100644 --- a/components/organisms/navbar/index.tsx +++ b/components/organisms/navbar/index.tsx @@ -1,19 +1,22 @@ import { useState } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/router'; +import { useTranslations } from 'next-intl'; import { ThemeToggle } from '../../atoms/theme-toggle'; +import { LocaleSwitcher } from '../../atoms/locale-switcher'; const NAV_LINKS = [ - { label: 'Home', href: '/' }, - { label: 'Explore', href: '/explore' }, - { label: 'Leaderboard', href: '/leaderboard' }, - { label: 'Dashboard', href: '/dashboard' }, - { label: 'Escrow', href: '/escrow' }, -]; + { key: 'home', href: '/' }, + { key: 'explore', href: '/explore' }, + { key: 'leaderboard', href: '/leaderboard' }, + { key: 'dashboard', href: '/dashboard' }, + { key: 'escrow', href: '/escrow' }, +] as const; export function Navbar() { const [open, setOpen] = useState(false); const router = useRouter(); + const t = useTranslations('Nav'); const toggle = () => setOpen((v) => !v); const close = () => setOpen(false); @@ -27,7 +30,7 @@ export function Navbar() { {/* Desktop links */}