96 lines
4.2 KiB
TypeScript
96 lines
4.2 KiB
TypeScript
|
|
|||
|
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import { SECTION_IDS, CAREERS_PAGE_CONTENT } from '../constants'; // mockVacancies removed
|
|||
|
|
import Button from './Button';
|
|||
|
|
import { ChevronRightIcon, BriefcaseIcon } from './icons'; // Added BriefcaseIcon
|
|||
|
|
import { CurrentView, Vacancy } from '../types';
|
|||
|
|
|
|||
|
|
interface CareersSectionProps {
|
|||
|
|
vacancies: Vacancy[]; // Changed from mockVacancies to accept prop
|
|||
|
|
setCurrentView: (view: CurrentView) => void;
|
|||
|
|
setSelectedItemId: (id: string | null) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const CareersSection: React.FC<CareersSectionProps> = ({ vacancies, setCurrentView, setSelectedItemId }) => {
|
|||
|
|
|
|||
|
|
const handleDetailsClick = (vacancyId: string) => {
|
|||
|
|
setCurrentView('vacancyDetail');
|
|||
|
|
setSelectedItemId(vacancyId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
id={SECTION_IDS.careersPage}
|
|||
|
|
className="py-16 md:py-24 bg-white min-h-screen"
|
|||
|
|
>
|
|||
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|||
|
|
<header className="mb-12 md:mb-16 text-center md:text-left">
|
|||
|
|
<h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
|
|||
|
|
{CAREERS_PAGE_CONTENT.title}
|
|||
|
|
</h1>
|
|||
|
|
<p className="mt-4 text-lg md:text-xl text-slate-700 max-w-2xl mx-auto md:mx-0">
|
|||
|
|
{CAREERS_PAGE_CONTENT.subtitle}
|
|||
|
|
</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div className="space-y-8">
|
|||
|
|
{vacancies && vacancies.length > 0 ? (
|
|||
|
|
vacancies.map((vacancy: Vacancy) => (
|
|||
|
|
<div key={vacancy.id} className="bg-white p-6 rounded-xl">
|
|||
|
|
<div className="md:flex md:justify-between md:items-start">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-2xl font-quicksand font-semibold text-slate-800 mb-1">{vacancy.title}</h2>
|
|||
|
|
<p className="text-sm text-slate-500 mb-2">
|
|||
|
|
{vacancy.department} • {vacancy.location} • {vacancy.type}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-slate-600 font-inter line-clamp-2">{vacancy.description}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-4 md:mt-0 md:ml-6 flex-shrink-0">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="md"
|
|||
|
|
onClick={() => handleDetailsClick(vacancy.id)}
|
|||
|
|
rightIcon={<ChevronRightIcon />}
|
|||
|
|
aria-label={`Подробнее о вакансии ${vacancy.title}`}
|
|||
|
|
>
|
|||
|
|
Подробнее
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-10 bg-white p-6 rounded-xl">
|
|||
|
|
<BriefcaseIcon className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
|||
|
|
<h2 className="text-2xl font-quicksand font-semibold text-slate-700 mb-3">{CAREERS_PAGE_CONTENT.noVacanciesTitle}</h2>
|
|||
|
|
<p className="text-slate-600 font-inter">
|
|||
|
|
{CAREERS_PAGE_CONTENT.noVacanciesMessagePt1}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-slate-600 font-inter mt-3">
|
|||
|
|
Вы можете следить за обновлениями на этой странице или отправить свое резюме и сопроводительное письмо на адрес <a href={`mailto:${CAREERS_PAGE_CONTENT.hrEmail}`} className="text-slate-700 hover:text-black hover:underline">{CAREERS_PAGE_CONTENT.noVacanciesContactEmailText}</a>. {CAREERS_PAGE_CONTENT.noVacanciesMessagePt2}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-16 text-center">
|
|||
|
|
<h3 className="text-xl font-quicksand font-semibold text-slate-700 mb-3">{CAREERS_PAGE_CONTENT.notFoundTitle}</h3>
|
|||
|
|
<p className="text-slate-600 font-inter mb-6 max-w-xl mx-auto">
|
|||
|
|
{CAREERS_PAGE_CONTENT.notFoundMessage}
|
|||
|
|
</p>
|
|||
|
|
<Button
|
|||
|
|
variant="primary"
|
|||
|
|
size="lg"
|
|||
|
|
onClick={() => window.location.href = `mailto:${CAREERS_PAGE_CONTENT.hrEmail}?subject=${encodeURIComponent(CAREERS_PAGE_CONTENT.applySubject)}`}
|
|||
|
|
>
|
|||
|
|
{CAREERS_PAGE_CONTENT.applyButtonText}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CareersSection;
|