83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { Download, Eye } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import { CertificatesPageData } from '@/app/api-utlities/@types/pages';
|
|
|
|
import { Container } from '@/shared/components/container';
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|
|
|
export interface CertificatesPageProps {
|
|
content: CertificatesPageData;
|
|
}
|
|
|
|
export function CertificatesPage({ content }: CertificatesPageProps) {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<main>
|
|
<Container>
|
|
<div className='mb-10 text-center'>
|
|
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
|
|
<p className='mx-auto max-w-2xl text-lg text-gray-600'>
|
|
{t('certificates.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
|
|
{content.certificates.map((certificate) => (
|
|
<Card
|
|
data-aos='zoom-in'
|
|
key={certificate.id}
|
|
className='overflow-hidden transition-all duration-300 hover:shadow-lg'
|
|
>
|
|
<div className='relative h-[300px] w-full overflow-hidden bg-gray-100'>
|
|
<Image
|
|
src={certificate.image || '/placeholder.svg'}
|
|
alt={certificate.name}
|
|
fill
|
|
className='object-contain p-4'
|
|
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
|
|
/>
|
|
</div>
|
|
<CardContent className='p-6'>
|
|
<h3 className='mb-2 text-xl font-bold'>{certificate.name}</h3>
|
|
<p className='mb-4 text-gray-600'>{certificate.description}</p>
|
|
<div className='mb-4 text-sm text-gray-500'>
|
|
<p>
|
|
{t('certificates.issueDate')}: {certificate.issuedAt}
|
|
</p>
|
|
<p>
|
|
{t('certificates.expiryDate')}: {certificate.validUntil}
|
|
</p>
|
|
</div>
|
|
<div className='flex gap-2'>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
className='flex items-center gap-1'
|
|
>
|
|
<Eye size={16} />
|
|
<span>{t('common.buttons.view')}</span>
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
className='flex items-center gap-1'
|
|
>
|
|
<Download size={16} />
|
|
<span>{t('common.buttons.download')}</span>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</main>
|
|
);
|
|
}
|