Files
cruciverba_1/webapp/app/[locale]/page.tsx

86 lines
3.0 KiB
TypeScript

import Link from "next/link";
import { notFound } from "next/navigation";
import { CrosswordConfigForm } from "@/components/crossword-config-form";
import { LanguageSwitcher } from "@/components/language-switcher";
import { getDictionary, isLocale } from "@/lib/i18n";
import { getMockCrosswordResponse } from "@/lib/mock-crossword";
type LocalizedHomePageProps = {
params: Promise<{ locale: string }>;
};
export default async function LocalizedHomePage({ params }: LocalizedHomePageProps) {
const { locale } = await params;
if (!isLocale(locale)) {
notFound();
}
const dict = getDictionary(locale);
const crossword = getMockCrosswordResponse(locale);
return (
<main className="shell stack">
<section className="hero">
<div className="hero__topline">
<span className="hero__badge">{dict.home.badge}</span>
<LanguageSwitcher locale={locale} />
</div>
<h1>{dict.home.title}</h1>
<p>{dict.home.subtitle}</p>
</section>
<section className="home-grid">
<div className="card panel">
<h2>{dict.home.requestTitle}</h2>
<p className="muted">{dict.home.requestText}</p>
<CrosswordConfigForm locale={locale} dict={dict.form} />
</div>
<div className="stack">
<div className="card panel">
<h2>{dict.home.structureTitle}</h2>
<div className="chip-row">
{dict.home.structureChips.map((chip) => (
<span className="chip" key={chip}>
{chip}
</span>
))}
</div>
<p className="muted contract-note">{dict.home.structureText}</p>
</div>
<div className="card panel">
<h2>{dict.home.demoTitle}</h2>
<div className="kpi-grid">
<div className="kpi">
<span className="muted">{dict.home.kpis.words}</span>
<strong>{crossword.summary.total_words}</strong>
</div>
<div className="kpi">
<span className="muted">{dict.home.kpis.intersections}</span>
<strong>{crossword.summary.intersections}</strong>
</div>
<div className="kpi">
<span className="muted">{dict.home.kpis.rows}</span>
<strong>{crossword.grid.rows}</strong>
</div>
<div className="kpi">
<span className="muted">{dict.home.kpis.cols}</span>
<strong>{crossword.grid.cols}</strong>
</div>
</div>
<div className="actions" style={{ marginTop: 18 }}>
<Link className="button" href={`/${locale}/crosswords/demo-transport`}>
{dict.home.openDemo}
</Link>
<Link className="button button--secondary" href={`/${locale}/new`}>
{dict.home.openConfig}
</Link>
</div>
</div>
</div>
</section>
</main>
);
}