Initial commit for iiEasy: all files included

components/VacancyDetail.tsx

@@ -0,0 +1,166 @@
+
+
+import React from 'react';
+import { CurrentView, Vacancy } from '../types';
+import { SECTION_IDS, VACANCY_DETAIL_CONTENT } from '../constants'; // mockVacancies removed
+import Button from './Button';
+import { ArrowUturnLeftIcon, BriefcaseIcon, MapPinIcon, ClockIcon, EmailIcon, CheckIcon } from './icons'; 
+
+interface VacancyDetailProps {
+  itemId: string;
+  allVacancies: Vacancy[]; // Changed to accept allVacancies from Strapi
+  setCurrentView: (view: CurrentView) => void;
+  setSelectedItemId: (id: string | null) => void;
+}
+
+const VacancyDetail: React.FC<VacancyDetailProps> = ({ itemId, allVacancies, setCurrentView, setSelectedItemId }) => {
+  const vacancy = allVacancies.find(v => v.id === itemId || v.href === itemId);
+
+  const handleBackClick = () => {
+    setCurrentView('careers');
+    setSelectedItemId(null);
+     setTimeout(() => {
+      document.getElementById(SECTION_IDS.careersPage)?.scrollIntoView({ behavior: 'smooth' });
+    }, 0);
+  };
+
+  if (!vacancy) {
+    return (
+      <section 
+        id={SECTION_IDS.vacancyDetailPage}
+        className="py-16 md:py-24 bg-white min-h-screen flex items-center justify-center"
+      >
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <BriefcaseIcon className="w-16 h-16 mx-auto text-slate-400 mb-4" />
+          <h1 className="text-2xl font-semibold font-quicksand text-slate-700 mb-4">{VACANCY_DETAIL_CONTENT.notFoundTitle}</h1>
+          <p className="text-slate-600 mb-8">
+            {VACANCY_DETAIL_CONTENT.vacancyNotFoundMessage}
+          </p>
+          <Button 
+            onClick={handleBackClick} 
+            leftIcon={<ArrowUturnLeftIcon />} 
+            variant="outline"
+          >
+            {VACANCY_DETAIL_CONTENT.backButtonText}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  const applyMailto = `mailto:${VACANCY_DETAIL_CONTENT.hrEmail}?subject=${encodeURIComponent(VACANCY_DETAIL_CONTENT.mailtoSubjectPrefix + vacancy.title)}&body=${encodeURIComponent(VACANCY_DETAIL_CONTENT.mailtoBodyPrefix + vacancy.title + "\"." + " Мое резюме во вложении.")}`;
+
+
+  return (
+    <section 
+      id={SECTION_IDS.vacancyDetailPage}
+      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-8 md:mb-12">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleBackClick}
+            leftIcon={<ArrowUturnLeftIcon />}
+            className="mb-6"
+          >
+            {VACANCY_DETAIL_CONTENT.backButtonText}
+          </Button>
+          <h1 className="font-quicksand text-3xl sm:text-4xl md:text-5xl font-bold text-slate-800 mb-3">
+            {vacancy.title}
+          </h1>
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 font-inter text-sm text-slate-600">
+            <div className="flex items-center">
+              <BriefcaseIcon className="w-4 h-4 mr-1.5 text-slate-500" />
+              <span>{vacancy.department}</span>
+            </div>
+            <div className="flex items-center">
+              <MapPinIcon className="w-4 h-4 mr-1.5 text-slate-500" />
+              <span>{vacancy.location}</span>
+            </div>
+            <div className="flex items-center">
+              <ClockIcon className="w-4 h-4 mr-1.5 text-slate-500" />
+              <span>{vacancy.type}</span>
+            </div>
+          </div>
+        </header>
+
+        <div className="bg-white p-6 sm:p-8 md:p-10 rounded-xl">
+          <div className="prose prose-lg max-w-none font-inter text-slate-700">
+            {vacancy.fullDescription && (
+              <>
+                <h2 className="font-quicksand text-xl font-semibold text-slate-700">{VACANCY_DETAIL_CONTENT.descriptionTitle}</h2>
+                {typeof vacancy.fullDescription === 'string' && vacancy.fullDescription.includes('<') ? 
+                  <div dangerouslySetInnerHTML={{ __html: vacancy.fullDescription }} /> : 
+                  <p>{vacancy.fullDescription}</p>
+                }
+              </>
+            )}
+
+            {vacancy.responsibilities && vacancy.responsibilities.length > 0 && (
+              <>
+                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.responsibilitiesTitle}</h2>
+                <ul className="list-none p-0 space-y-3">
+                  {vacancy.responsibilities.map((item, index) => (
+                    <li key={index} className="flex items-start">
+                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {vacancy.qualifications && vacancy.qualifications.length > 0 && (
+              <>
+                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.qualificationsTitle}</h2>
+                <ul className="list-none p-0 space-y-3">
+                  {vacancy.qualifications.map((item, index) => (
+                    <li key={index} className="flex items-start">
+                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {vacancy.offer && vacancy.offer.length > 0 && (
+              <>
+                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.offerTitle}</h2>
+                <ul className="list-none p-0 space-y-3">
+                  {vacancy.offer.map((item, index) => (
+                     <li key={index} className="flex items-start">
+                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+
+          <div className="mt-10 pt-8 border-t border-slate-200 text-center">
+             <h3 className="text-xl font-quicksand font-semibold text-slate-700 mb-4">
+                {VACANCY_DETAIL_CONTENT.applyPromptTitle}
+            </h3>
+            <p className="text-slate-600 font-inter mb-6 max-w-lg mx-auto">
+                {VACANCY_DETAIL_CONTENT.applyPromptMessage}
+            </p>
+            <Button
+              variant="primary"
+              size="lg"
+              leftIcon={<EmailIcon />} 
+              onClick={() => window.location.href = applyMailto}
+            >
+              {VACANCY_DETAIL_CONTENT.applyButtonText}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default VacancyDetail;