141 lines
4.4 KiB
TypeScript
141 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { Briefcase } from 'lucide-react';
|
|
|
|
import { Jobs } from '@/app/api-utlities/@types/main';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { cn } from '@/shared/lib/utils';
|
|
import { Badge } from '@/shared/shadcn-ui/badge';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from '@/shared/shadcn-ui/tabs';
|
|
|
|
interface VacanciesSectionProps {
|
|
jobs: Jobs;
|
|
}
|
|
|
|
export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
|
|
const { t } = useTextController();
|
|
|
|
const jobsByType = new Map();
|
|
|
|
jobs.forEach((job) => {
|
|
const existing = jobsByType.get(job.type) || [];
|
|
jobsByType.set(job.type, [...existing, job]);
|
|
});
|
|
|
|
const allVacancies = t('home.vacancies.all');
|
|
const officeVacancies = t('home.vacancies.office');
|
|
const stationsVacancies = t('home.vacancies.stations');
|
|
|
|
const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
|
|
|
|
return (
|
|
<section id='vacancies' className='px-2 py-8 sm:py-16'>
|
|
<div className='container mx-auto'>
|
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<Briefcase className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('home.vacancies.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('home.vacancies.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<Tabs defaultValue={allVacancies} className='mx-auto w-full max-w-3xl'>
|
|
<TabsList className='mb-8 grid grid-cols-3'>
|
|
<TabsTrigger value={allVacancies}>
|
|
{t('home.vacancies.all')}
|
|
</TabsTrigger>
|
|
<TabsTrigger value={officeVacancies}>
|
|
{t('home.vacancies.office')}
|
|
</TabsTrigger>
|
|
<TabsTrigger value={stationsVacancies}>
|
|
{t('home.vacancies.stations')}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value={allVacancies} className='space-y-4'>
|
|
{jobs.map((job, index) => (
|
|
<Vacancy
|
|
key={index}
|
|
jobTitle={job.name}
|
|
location={job.location ?? ''}
|
|
tags={job.tags}
|
|
/>
|
|
))}
|
|
</TabsContent>
|
|
|
|
{Array.from(jobsByType.entries()).map(([type, jobs]) => (
|
|
<TabsContent key={type} value={type} className='space-y-4'>
|
|
{jobs.map((job: Jobs[number], index: number) => (
|
|
<Vacancy
|
|
key={index}
|
|
jobTitle={job.name}
|
|
location={job.location ?? ''}
|
|
tags={job.tags}
|
|
/>
|
|
))}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
interface VacancyProps {
|
|
jobTitle: string;
|
|
location: string;
|
|
tags: Array<string>;
|
|
}
|
|
|
|
const Vacancy = ({ jobTitle, location, tags }: VacancyProps) => {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<Card
|
|
className='overflow-hidden transition-all hover:shadow-md'
|
|
data-aos='zoom-in'
|
|
>
|
|
<CardContent className='p-0'>
|
|
<div className='p-6'>
|
|
<div className='flex flex-col items-start justify-between sm:flex-row'>
|
|
<div>
|
|
<h3 className='mb-2 text-lg font-bold'>{jobTitle}</h3>
|
|
<p className='mb-4 text-sm text-gray-500'>{location}</p>
|
|
<div className='mb-4 flex flex-wrap gap-2'>
|
|
{tags.map((tag, index) => {
|
|
return (
|
|
<Badge
|
|
key={index}
|
|
className={cn(
|
|
'inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium',
|
|
`${index % 2 === 0 ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800'}`,
|
|
)}
|
|
>
|
|
{tag}
|
|
</Badge>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<Button variant='outline' size='sm'>
|
|
{t('common.buttons.apply')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|