221 lines
8.5 KiB
TypeScript
221 lines
8.5 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Anchor } from 'lucide-react';
|
|
|
|
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">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<Link
|
|
href="/dashboard/wiki"
|
|
className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 19l-7-7 7-7"
|
|
/>
|
|
</svg>
|
|
{t('backToWiki')}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Anchor className="w-10 h-10 text-blue-600" />
|
|
<h1 className="text-3xl font-bold text-gray-900">{t('vgm.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-gray-600 max-w-3xl">{t('vgm.description')}</p>
|
|
</div>
|
|
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-blue-900 mb-3">{t('vgm.whyTitle')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
|
|
{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-gray-900 mb-4">{t('vgm.componentsTitle')}</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="bg-gray-50 p-4 rounded-lg border mb-4 text-center font-mono text-lg">
|
|
<span className="bg-blue-100 text-blue-800 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-gray-900">{item.element}</h4>
|
|
<p className="text-sm text-gray-600">{item.description}</p>
|
|
</div>
|
|
<span className="text-sm font-mono bg-gray-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-gray-900 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-gray-600 mb-4">{method.description}</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<h4 className="font-medium text-gray-700 mb-2">{t('vgm.processLabel')}</h4>
|
|
<ol className="list-decimal list-inside text-sm text-gray-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-gray-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-gray-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-gray-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-gray-900 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-gray-900">{r.role}</h4>
|
|
<p className="text-sm text-gray-600 mt-1">{r.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-4 bg-gray-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-gray-900 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-gray-600">{t('vgm.toleranceValue')}</p>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">{t('vgm.consequenceLabel')} :</span>
|
|
<p className="text-gray-600">{t('vgm.consequenceValue')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 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-gray-900">{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>
|
|
);
|
|
}
|