70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useI18n } from "../components/I18nProvider";
|
|
|
|
const highlights = [
|
|
{ keyTitle: "highlightQualityTitle", keyBody: "highlightQualityBody" },
|
|
{ keyTitle: "highlightLocalTitle", keyBody: "highlightLocalBody" },
|
|
{ keyTitle: "highlightApiTitle", keyBody: "highlightApiBody" },
|
|
];
|
|
|
|
export default function AboutPage() {
|
|
const { t } = useI18n();
|
|
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
|
|
const apiBase =
|
|
process.env.NEXT_PUBLIC_API_BASE || "http://localhost:3000/api";
|
|
const appEnv = process.env.APP_ENV || "local";
|
|
const appVersion = process.env.NEXT_PUBLIC_VERSION || "dev";
|
|
|
|
return (
|
|
<main>
|
|
<section className="panel">
|
|
<div className="breadcrumb">
|
|
<Link href="/">{t("homeCrumb")}</Link> /{" "}
|
|
<span>{t("aboutTitle")}</span>
|
|
</div>
|
|
<h1>{t("aboutTitle")}</h1>
|
|
<p style={{ marginTop: 8 }}>{t("aboutLead")}</p>
|
|
</section>
|
|
|
|
<div className="cards" style={{ marginTop: 18 }}>
|
|
{highlights.map((item) => (
|
|
<div key={item.keyTitle} className="panel">
|
|
<h3 className="card-title">{t(item.keyTitle as any)}</h3>
|
|
<p>{t(item.keyBody as any)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<section className="panel env-card" style={{ marginTop: 18 }}>
|
|
<h2 className="card-title">{t("runtimeConfigTitle")}</h2>
|
|
<p style={{ marginTop: 4 }}>{t("runtimeConfigLead")}</p>
|
|
<div className="meta-grid">
|
|
<span>
|
|
<strong>{t("runtimeAppEnv")}</strong> <code>{appEnv}</code>
|
|
</span>
|
|
<span>
|
|
<strong>{t("runtimeSiteUrl")}</strong> <code>{siteUrl}</code>
|
|
</span>
|
|
<span>
|
|
<strong>{t("runtimeApiBase")}</strong> <code>{apiBase}</code>
|
|
</span>
|
|
<span>
|
|
<strong>Version</strong> <code>{appVersion}</code>
|
|
</span>
|
|
</div>
|
|
<div style={{ marginTop: 12 }}>
|
|
<a
|
|
className="button secondary"
|
|
href="/api/health"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("ctaHealth")}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|