diff --git a/app/[locale]/policy/page.tsx b/app/[locale]/policy/page.tsx index e64e0ac..4f01985 100644 --- a/app/[locale]/policy/page.tsx +++ b/app/[locale]/policy/page.tsx @@ -1,6 +1,4 @@ import { Main } from "@/app/ui/Main"; -import { PageFooter } from "@/app/ui/PageFooter"; -import { PageHeader } from "@/app/ui/PageHeader"; const ConsentPage = () =>
diff --git a/app/i18n.ts b/app/i18n.ts index a539866..fc0e549 100644 --- a/app/i18n.ts +++ b/app/i18n.ts @@ -5,6 +5,11 @@ import { Formats, TranslationValues } from 'next-intl'; // Can be imported from a shared config export const locales = ['en', 'hr']; +export const localeNames:Record = { + en: 'English', + hr: 'Hrvatski' +}; + export const defaultLocale = 'en'; /** Templating function type as returned by `useTemplate` and `getTranslations` */ diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx index f1afa8b..ae9f1a5 100644 --- a/app/ui/AddMonthButton.tsx +++ b/app/ui/AddMonthButton.tsx @@ -3,7 +3,7 @@ import React from "react"; import { formatYearMonth } from "../lib/format"; import { YearMonth } from "../lib/db-types"; import Link from "next/link"; -import { useTranslations } from 'next-intl'; +import { useLocale, useTranslations } from 'next-intl'; export interface AddMonthButtonProps { yearMonth: YearMonth; @@ -12,10 +12,11 @@ export interface AddMonthButtonProps { export const AddMonthButton:React.FC = ({ yearMonth }) => { const t = useTranslations("home-page.add-month-button"); + const locale = useLocale(); return(
- + diff --git a/app/ui/Main.tsx b/app/ui/Main.tsx index 41b9637..3b9d044 100644 --- a/app/ui/Main.tsx +++ b/app/ui/Main.tsx @@ -1,16 +1,25 @@ import { FC } from "react"; import { PageHeader } from "./PageHeader"; import { PageFooter } from "./PageFooter"; +import { NextIntlClientProvider, useMessages } from "next-intl"; export interface MainProps { children: React.ReactNode; } -export const Main:FC = ({ children }) => -
- -
- {children} -
- -
\ No newline at end of file +export const Main:FC = ({ children }) => { + + const message = useMessages(); + + return( + +
+ +
+ {children} +
+ +
+
+ ); +} \ No newline at end of file diff --git a/app/ui/PageHeader.tsx b/app/ui/PageHeader.tsx index 45867ce..b009479 100644 --- a/app/ui/PageHeader.tsx +++ b/app/ui/PageHeader.tsx @@ -1,7 +1,10 @@ import Image from "next/image"; import Link from "next/link"; +import { SelectLanguage } from "./SelectLanguage"; export const PageHeader = () => -
- logo Režije -
\ No newline at end of file +
+ logo Režije +   + +
\ No newline at end of file diff --git a/app/ui/SelectLanguage.tsx b/app/ui/SelectLanguage.tsx new file mode 100644 index 0000000..623aaa6 --- /dev/null +++ b/app/ui/SelectLanguage.tsx @@ -0,0 +1,16 @@ +"use client"; + +import { useLocale } from "next-intl"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { defaultLocale, localeNames, locales } from "../i18n"; + +export const SelectLanguage: React.FC = () => { + const currentPathname = usePathname(); + + const locale = useLocale(); + const secondLocale = locales.find((l) => l !== locale) as string; + const secondLocalePathname = defaultLocale === locale ? `/${secondLocale}${currentPathname}` : currentPathname.replace(`/${locale}/`, `/${secondLocale}/`); + + return ({localeNames[secondLocale]}); +} \ No newline at end of file