mirror of
https://github.com/spliit-app/spliit.git
synced 2026-03-07 12:56:12 +01:00
Internationalization + Finnish language (#181)
* I18n with next-intl * package-lock * Finnish translations * Development fix * Use locale for positioning currency symbol * Translations: Expenses.ActiveUserModal * Translations: group 404 * Better translation for ExpenseCard * Apply translations in CategorySelect search * Fix for Finnish translation * Translations for ExpenseDocumentsInput * Translations for CreateFromReceipt * Fix for Finnish translation * Translations for schema errors * Fix for Finnish translation * Fixes for Finnish translations * Prettier --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>
This commit is contained in:
Tuomas Jaakola
GitHub
@@ -1,4 +1,5 @@
|
||||
import { ApplePwaSplash } from '@/app/apple-pwa-splash'
|
||||
import { LocaleSwitcher } from '@/components/locale-switcher'
|
||||
import { ProgressBar } from '@/components/progress-bar'
|
||||
import { ThemeProvider } from '@/components/theme-provider'
|
||||
import { ThemeToggle } from '@/components/theme-toggle'
|
||||
@@ -6,6 +7,8 @@ import { Button } from '@/components/ui/button'
|
||||
import { Toaster } from '@/components/ui/toaster'
|
||||
import { env } from '@/lib/env'
|
||||
import type { Metadata, Viewport } from 'next'
|
||||
import { NextIntlClientProvider, useTranslations } from 'next-intl'
|
||||
import { getLocale, getMessages } from 'next-intl/server'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { Suspense } from 'react'
|
||||
@@ -59,93 +62,109 @@ export const viewport: Viewport = {
|
||||
themeColor: '#047857',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
function Content({ children }: { children: React.ReactNode }) {
|
||||
const t = useTranslations()
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ApplePwaSplash icon="/logo-with-text.png" color="#027756" />
|
||||
<body className="pt-16 min-h-[100dvh] flex flex-col items-stretch bg-slate-50 bg-opacity-30 dark:bg-background">
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
<>
|
||||
<header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
|
||||
<Link
|
||||
className="flex items-center gap-2 hover:scale-105 transition-transform"
|
||||
href="/"
|
||||
>
|
||||
<Suspense>
|
||||
<ProgressBar />
|
||||
</Suspense>
|
||||
<header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
|
||||
<Link
|
||||
className="flex items-center gap-2 hover:scale-105 transition-transform"
|
||||
href="/"
|
||||
>
|
||||
<h1>
|
||||
<Image
|
||||
src="/logo-with-text.png"
|
||||
className="m-1 h-auto w-auto"
|
||||
width={(35 * 522) / 180}
|
||||
height={35}
|
||||
alt="Spliit"
|
||||
/>
|
||||
</h1>
|
||||
<h1>
|
||||
<Image
|
||||
src="/logo-with-text.png"
|
||||
className="m-1 h-auto w-auto"
|
||||
width={(35 * 522) / 180}
|
||||
height={35}
|
||||
alt="Spliit"
|
||||
/>
|
||||
</h1>
|
||||
</Link>
|
||||
<div role="navigation" aria-label="Menu" className="flex">
|
||||
<ul className="flex items-center text-sm">
|
||||
<li>
|
||||
<Button variant="ghost" asChild className="-my-3 text-primary">
|
||||
<Link href="/groups">{t('Header.groups')}</Link>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<LocaleSwitcher />
|
||||
</li>
|
||||
<li>
|
||||
<ThemeToggle />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 flex flex-col">{children}</div>
|
||||
|
||||
<footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
|
||||
<Link className="flex items-center gap-2" href="/">
|
||||
<Image
|
||||
src="/logo-with-text.png"
|
||||
className="m-1 h-auto w-auto"
|
||||
width={(35 * 522) / 180}
|
||||
height={35}
|
||||
alt="Spliit"
|
||||
/>
|
||||
</Link>
|
||||
<div role="navigation" aria-label="Menu" className="flex">
|
||||
<ul className="flex items-center text-sm">
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
asChild
|
||||
className="-my-3 text-primary"
|
||||
>
|
||||
<Link href="/groups">Groups</Link>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<ThemeToggle />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 flex flex-col">{children}</div>
|
||||
|
||||
<footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
|
||||
<Link className="flex items-center gap-2" href="/">
|
||||
<Image
|
||||
src="/logo-with-text.png"
|
||||
className="m-1 h-auto w-auto"
|
||||
width={(35 * 522) / 180}
|
||||
height={35}
|
||||
alt="Spliit"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col space-y a--no-underline-text-white">
|
||||
<span>Made in Montréal, Québec 🇨🇦</span>
|
||||
<span>
|
||||
Built by{' '}
|
||||
</div>
|
||||
<div className="flex flex-col space-y a--no-underline-text-white">
|
||||
<span>{t('Footer.madeIn')}</span>
|
||||
<span>
|
||||
{t.rich('Footer.builtBy', {
|
||||
author: (txt) => (
|
||||
<a href="https://scastiel.dev" target="_blank" rel="noopener">
|
||||
Sebastien Castiel
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
{txt}
|
||||
</a>
|
||||
),
|
||||
source: (txt) => (
|
||||
<a
|
||||
href="https://github.com/spliit-app/spliit/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
contributors
|
||||
{txt}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Toaster />
|
||||
</ThemeProvider>
|
||||
),
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Toaster />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const locale = await getLocale()
|
||||
const messages = await getMessages()
|
||||
return (
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<ApplePwaSplash icon="/logo-with-text.png" color="#027756" />
|
||||
<body className="pt-16 min-h-[100dvh] flex flex-col items-stretch bg-slate-50 bg-opacity-30 dark:bg-background">
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<Suspense>
|
||||
<ProgressBar />
|
||||
</Suspense>
|
||||
<Content>{children}</Content>
|
||||
</ThemeProvider>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user