96 lines
4.2 KiB
TypeScript
Executable File
96 lines
4.2 KiB
TypeScript
Executable File
|
||
|
||
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; |