Initial commit for iiEasy: all files included

components/CareersSection.tsx

@@ -0,0 +1,96 @@
+
+
+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;