added language switcher

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 = () =>   
     <Main>

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<string,string> = {
+  en: 'English',
+  hr: 'Hrvatski'
+};
+
 export const defaultLocale = 'en';
 
 /** Templating function type as returned by `useTemplate` and `getTranslations` */

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<AddMonthButtonProps> = ({ yearMonth }) => {
 
     const t = useTranslations("home-page.add-month-button");
+    const locale = useLocale();
 
     return(
         <div className="card card-compact shadow-s mb-4">
-            <Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
+            <Link href={`/${locale}/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
                 <span className='flex self-center mr-[-3em]'>
                     <CalendarDaysIcon className="h-[1em] w-[1em] cursor-pointer text-4xl"  />
                     <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.4em] mt-[-.4em]"  />

app/ui/Main.tsx

@@ -1,12 +1,18 @@
 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<MainProps> = ({ children }) =>
+export const Main:FC<MainProps> = ({ children }) => {
+
+    const message = useMessages();
+
+    return(
+        <NextIntlClientProvider messages={message}>
             <main className="flex min-h-screen flex-col bg-base-300">
                 <PageHeader />
                 <div className="sm:mx-auto px-4">
@@ -14,3 +20,6 @@ export const Main:FC<MainProps> = ({ children }) =>
                 </div>
                 <PageFooter />
             </main>
+        </NextIntlClientProvider>
+    );
+}

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 = () =>
     <div className="navbar bg-base-100 mb-6">
         <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
+        <span className="grow">&nbsp;</span>
+        <SelectLanguage />
     </div>

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 (<Link className="btn btn-ghost text-xl self-end" href={secondLocalePathname}>{localeNames[secondLocale]}</Link>);
+}