58 lines
1.9 KiB
TypeScript
58 lines
1.9 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>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|