feat(web-i18n): add es/fr locales and expand switcher locale set
This commit is contained in:
27
apps/web/src/app/[locale]/layout.tsx
Normal file
27
apps/web/src/app/[locale]/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import { hasLocale, NextIntlClientProvider } from "next-intl"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
import { routing } from "@/i18n/routing"
|
||||
import { Providers } from "../providers"
|
||||
|
||||
type LocaleLayoutProps = {
|
||||
children: ReactNode
|
||||
params: Promise<{
|
||||
locale: string
|
||||
}>
|
||||
}
|
||||
|
||||
export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
|
||||
const { locale } = await params
|
||||
|
||||
if (!hasLocale(routing.locales, locale)) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale}>
|
||||
<Providers>{children}</Providers>
|
||||
</NextIntlClientProvider>
|
||||
)
|
||||
}
|
||||
@@ -1,25 +1,29 @@
|
||||
import { listPosts } from "@cms/db"
|
||||
import { Button } from "@cms/ui/button"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import { LanguageSwitcher } from "@/components/language-switcher"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function HomePage() {
|
||||
const posts = await listPosts()
|
||||
const [posts, t] = await Promise.all([listPosts(), getTranslations("Home")])
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-6 px-6 py-16">
|
||||
<header className="space-y-3">
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">Web App</p>
|
||||
<h1 className="text-4xl font-semibold tracking-tight">Your Next.js CMS Frontend</h1>
|
||||
<p className="text-neutral-600">
|
||||
This page reads posts through the shared database package.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
<h1 className="text-4xl font-semibold tracking-tight">{t("title")}</h1>
|
||||
<p className="text-neutral-600">{t("description")}</p>
|
||||
</header>
|
||||
|
||||
<section className="space-y-4 rounded-xl border border-neutral-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-medium">Latest posts</h2>
|
||||
<Button variant="secondary">Explore</Button>
|
||||
<h2 className="text-xl font-medium">{t("latestPosts")}</h2>
|
||||
<Button variant="secondary">{t("explore")}</Button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
@@ -27,7 +31,7 @@ export default async function HomePage() {
|
||||
<li key={post.id} className="rounded-lg border border-neutral-200 p-4">
|
||||
<p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
|
||||
<h3 className="mt-1 text-lg font-medium">{post.title}</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? "No excerpt"}</p>
|
||||
<p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? t("noExcerpt")}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -2,7 +2,6 @@ import type { Metadata } from "next"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
import "./globals.css"
|
||||
import { Providers } from "./providers"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "CMS Web",
|
||||
@@ -12,9 +11,7 @@ export const metadata: Metadata = {
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user