206 lines
8.1 KiB
TypeScript
206 lines
8.1 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Anchor } from 'lucide-react';
|
|
import { WikiBackLink } from '@/components/wiki/WikiBackLink';
|
|
|
|
export default async function VGMPage() {
|
|
const t = await getTranslations('dashboard.wikiPages');
|
|
|
|
const why = t.raw('vgm.why') as Array<{ title: string; description: string }>;
|
|
const elements = t.raw('vgm.elements') as Array<{
|
|
element: string;
|
|
description: string;
|
|
example: string;
|
|
}>;
|
|
const methods = t.raw('vgm.methods') as Array<{
|
|
method: string;
|
|
name: string;
|
|
description: string;
|
|
process: string[];
|
|
advantages: string[];
|
|
disadvantages: string[];
|
|
}>;
|
|
const responsibilities = t.raw('vgm.responsibilities') as Array<{
|
|
role: string;
|
|
description: string;
|
|
}>;
|
|
const sanctions = t.raw('vgm.sanctions') as Array<{ region: string; sanction: string }>;
|
|
const tips = t.raw('vgm.tips') as string[];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<WikiBackLink />
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Anchor className="w-10 h-10 text-brand-navy" />
|
|
<h1 className="text-3xl font-bold text-brand-navy">{t('vgm.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-neutral-600 max-w-3xl">{t('vgm.description')}</p>
|
|
</div>
|
|
|
|
<Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-3">{t('vgm.whyTitle')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-brand-navy">
|
|
{why.map(item => (
|
|
<div key={item.title}>
|
|
<h4 className="font-medium">{item.title}</h4>
|
|
<p className="text-sm mt-0.5">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('vgm.componentsTitle')}</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-neutral-50 p-4 rounded-lg border mb-4 text-center font-mono text-lg">
|
|
<span className="bg-brand-turquoise/10 text-brand-navy px-2 py-1 rounded">
|
|
{t('vgm.formula')}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{elements.map(item => (
|
|
<div
|
|
key={item.element}
|
|
className="flex items-center justify-between py-3 border-b last:border-0"
|
|
>
|
|
<div>
|
|
<h4 className="font-medium text-brand-navy">{item.element}</h4>
|
|
<p className="text-sm text-neutral-600">{item.description}</p>
|
|
</div>
|
|
<span className="text-sm font-mono bg-neutral-100 px-3 py-1 rounded ml-4 flex-shrink-0">
|
|
{item.example}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('vgm.methodsTitle')}</h2>
|
|
<div className="space-y-4">
|
|
{methods.map(method => (
|
|
<Card key={method.method} className="bg-white">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-3">
|
|
<span className="px-3 py-1 bg-green-600 text-white rounded-md text-sm">
|
|
{method.method}
|
|
</span>
|
|
<span className="text-lg">{method.name}</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-neutral-600 mb-4">{method.description}</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<h4 className="font-medium text-neutral-700 mb-2">{t('vgm.processLabel')}</h4>
|
|
<ol className="list-decimal list-inside text-sm text-neutral-600 space-y-1">
|
|
{method.process.map((step, i) => (
|
|
<li key={i}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-green-700 mb-2">
|
|
✓ {t('vgm.advantagesLabel')}
|
|
</h4>
|
|
<ul className="text-sm text-neutral-600 space-y-1">
|
|
{method.advantages.map(adv => (
|
|
<li key={adv} className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0" />
|
|
{adv}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-red-700 mb-2">
|
|
✗ {t('vgm.disadvantagesLabel')}
|
|
</h4>
|
|
<ul className="text-sm text-neutral-600 space-y-1">
|
|
{method.disadvantages.map(dis => (
|
|
<li key={dis} className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0" />
|
|
{dis}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-neutral-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-3">{t('vgm.responsibilityTitle')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{responsibilities.map(r => (
|
|
<div key={r.role} className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-brand-navy">{r.role}</h4>
|
|
<p className="text-sm text-neutral-600 mt-1">{r.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-4 bg-neutral-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-3">{t('vgm.tolerancesTitle')}</h3>
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="font-medium">{t('vgm.toleranceLabel')} :</span>
|
|
<p className="text-neutral-600">{t('vgm.toleranceValue')}</p>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">{t('vgm.consequenceLabel')} :</span>
|
|
<p className="text-neutral-600">{t('vgm.consequenceValue')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('vgm.sanctionsTitle')}</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="space-y-3">
|
|
{sanctions.map(s => (
|
|
<div
|
|
key={s.region}
|
|
className="flex items-center justify-between py-3 border-b last:border-0"
|
|
>
|
|
<span className="font-medium text-brand-navy">{s.region}</span>
|
|
<span className="text-sm text-red-600">{s.sanction}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-amber-50 border-amber-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-amber-900 mb-3">{t('vgm.tipsTitle')}</h3>
|
|
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
|
{tips.map((tip, i) => (
|
|
<li key={i}>{tip}</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|