115 lines
4.4 KiB
TypeScript
115 lines
4.4 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
import { WikiBackLink } from '@/components/wiki/WikiBackLink';
|
|
|
|
export default async function ImdgPage() {
|
|
const t = await getTranslations('dashboard.wikiPages');
|
|
|
|
const classes = t.raw('imdg.classes') as Array<{
|
|
class: string;
|
|
name: string;
|
|
description: string;
|
|
subdivisions?: string[];
|
|
}>;
|
|
const documents = t.raw('imdg.documents') as Array<{ name: string; description: string }>;
|
|
const packagingGroups = t.raw('imdg.packagingGroups') as Array<{
|
|
group: string;
|
|
description: string;
|
|
}>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<WikiBackLink />
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<AlertTriangle className="w-10 h-10 text-orange-500" />
|
|
<h1 className="text-3xl font-bold text-brand-navy">{t('imdg.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-neutral-600 max-w-3xl">{t('imdg.description')}</p>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('imdg.classesTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{classes.map(cls => (
|
|
<Card key={cls.class} className="bg-white border-orange-200">
|
|
<CardContent className="pt-4">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="px-2 py-0.5 bg-orange-100 text-orange-800 text-xs font-bold rounded">
|
|
{cls.class}
|
|
</span>
|
|
<h4 className="font-semibold text-brand-navy">{cls.name}</h4>
|
|
</div>
|
|
<p className="text-sm text-neutral-600">{cls.description}</p>
|
|
{cls.subdivisions && (
|
|
<div className="mt-2">
|
|
<p className="text-xs font-medium text-neutral-500 mb-1">
|
|
{t('imdg.subdivisionsLabel')}
|
|
</p>
|
|
<ul className="text-xs text-neutral-600 space-y-0.5">
|
|
{cls.subdivisions.map((sub, j) => (
|
|
<li key={j}>• {sub}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('imdg.documentsTitle')}</h2>
|
|
<div className="space-y-3">
|
|
{documents.map(doc => (
|
|
<Card key={doc.name} className="bg-white">
|
|
<CardContent className="py-3">
|
|
<h4 className="font-semibold text-brand-navy">{doc.name}</h4>
|
|
<p className="text-sm text-neutral-600 mt-1">{doc.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('imdg.packagingGroupsTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{packagingGroups.map((pg, i) => {
|
|
const colors = [
|
|
'bg-red-50 border-red-200',
|
|
'bg-yellow-50 border-yellow-200',
|
|
'bg-green-50 border-green-200',
|
|
];
|
|
return (
|
|
<Card key={pg.group} className={`border ${colors[i]}`}>
|
|
<CardContent className="pt-4">
|
|
<h4 className="font-semibold text-brand-navy">{pg.group}</h4>
|
|
<p className="text-sm text-neutral-600 mt-1">{pg.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-brand-turquoise/5 border-brand-turquoise/30">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-2">{t('imdg.labelingTitle')}</h3>
|
|
<p className="text-sm text-brand-navy">{t('imdg.labelingContent')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-4 bg-neutral-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-2">{t('imdg.segregationTitle')}</h3>
|
|
<p className="text-sm text-neutral-700">{t('imdg.segregationContent')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|