Jobs Showcase (#88)

* Jobs Showcase

* Updated Snapshots

Co-authored-by: allan <[email protected]>

package.json

@@ -24,7 +24,7 @@
     "react-i18next": "^12.0.0",
     "react-redux": "^8.0.1",
     "react-router-dom": "6",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "web-vitals": "^2.1.0",
     "yup": "^0.32.11"

src/App.jsx

@@ -8,6 +8,8 @@ import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
 import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
 import { showCaseData } from './data/showCaseData';
 import './App.css';
+import JobsShowcase from './components/JobsShowcase/JobsShowcase';
+import { showcaseData } from './data';
 import Categories from './components/Categories/Categories';
 import Education from './components/EducationAndExperience/Education';
 import Experience from './components/EducationAndExperience/Experience';
@@ -27,7 +29,8 @@ function App() {
   return (
     <div>
       <Hero />
-      <Categories/>
+      <JobsShowcase showcaseArray={showcaseData} />
+      <Categories />
       <h1>{t('hello')}</h1>
       <Localize />
       <HowItWorks />

src/components/JobsShowcase/JobsShowcase.jsx

@@ -0,0 +1,18 @@
+import Showcase from './Showcase';
+
+const JobsShowcase = ({ showcaseArray }) => {
+  return (
+    <div className="my-20 flex justify-center gap-x-20 flex-wrap w-screen ">
+      {showcaseArray.map((data) => {
+        return (
+          <Showcase
+            header={data.header}
+            body={data.body}
+            button={data.button}
+          />
+        );
+      })}
+    </div>
+  );
+};
+export default JobsShowcase;

src/components/JobsShowcase/JobsShowcase.test.js

@@ -0,0 +1,10 @@
+import renderer from 'react-test-renderer';
+import { showcaseData } from '../../data';
+import JobsShowcase from './JobsShowcase';
+
+it('renders correctly when the component matches the snapshot', () => {
+  const tree = renderer
+    .create(<JobsShowcase showcaseArray={showcaseData} />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/JobsShowcase/Showcase.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function Showcase(props) {
+  const { header, body, button } = props;
+  return (
+    <div className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  ">
+      <div>
+        <h1 className="mb-5 font-semibold text-3xl small:text-lg medium:text-2xl large:text-3xl ">
+          {header}
+        </h1>
+        <p className="small:text-sm">{body}</p>
+        <button
+          className="mt-5 font-semibold text-lg small:text-base"
+          type="button"
+        >
+          {button}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Showcase;

src/components/JobsShowcase/Showcase.test.js

@@ -0,0 +1,8 @@
+import renderer from 'react-test-renderer';
+
+import Showcase from './Showcase';
+
+it('renders correctly when the component matches the snapshot', () => {
+  const tree = renderer.create(<Showcase />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/JobsShowcase/__snapshots__/JobsShowcase.test.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className="my-20 flex justify-center gap-x-20 flex-wrap w-screen "
+>
+  <div
+    className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  "
+  >
+    <div>
+      <h1
+        className="mb-5 font-semibold text-3xl small:text-lg medium:text-2xl large:text-3xl "
+      >
+        Full Time Jobs
+      </h1>
+      <p
+        className="small:text-sm"
+      >
+        if you are set on your career and want to work full time, then a full time job is just the one for you, clicking here will show you all the current full time jobs in our platform
+      </p>
+      <button
+        className="mt-5 font-semibold text-lg small:text-base"
+        type="button"
+      >
+        Full time jobs &gt;
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  "
+  >
+    <div>
+      <h1
+        className="mb-5 font-semibold text-3xl small:text-lg medium:text-2xl large:text-3xl "
+      >
+        Part Time Jobs
+      </h1>
+      <p
+        className="small:text-sm"
+      >
+        if you are set on your career and want to work full time, then a full time job is just the one for you, clicking here will show you all the current full time jobs in our platform
+      </p>
+      <button
+        className="mt-5 font-semibold text-lg small:text-base"
+        type="button"
+      >
+        Part Time jobs &gt;
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  "
+  >
+    <div>
+      <h1
+        className="mb-5 font-semibold text-3xl small:text-lg medium:text-2xl large:text-3xl "
+      >
+        Remote Jobs
+      </h1>
+      <p
+        className="small:text-sm"
+      >
+         you are set on your career and want to work remotes, then a remotes job is just the one for you,  clicking here will show you all the current remotes jobs in our platform
+      </p>
+      <button
+        className="mt-5 font-semibold text-lg small:text-base"
+        type="button"
+      >
+        Remote jobs &gt;
+      </button>
+    </div>
+  </div>
+</div>
+`;

src/components/JobsShowcase/__snapshots__/Showcase.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  "
+>
+  <div>
+    <h1
+      className="mb-5 font-semibold text-3xl small:text-lg medium:text-2xl large:text-3xl "
+    />
+    <p
+      className="small:text-sm"
+    />
+    <button
+      className="mt-5 font-semibold text-lg small:text-base"
+      type="button"
+    />
+  </div>
+</div>
+`;

src/data.js

@@ -0,0 +1,17 @@
+export const showcaseData = [
+  {
+    header: 'Full Time Jobs',
+    body: 'if you are set on your career and want to work full time, then a full time job is just the one for you, clicking here will show you all the current full time jobs in our platform',
+    button: 'Full time jobs >',
+  },
+  {
+    header: 'Part Time Jobs',
+    body: 'if you are set on your career and want to work full time, then a full time job is just the one for you, clicking here will show you all the current full time jobs in our platform',
+    button: 'Part Time jobs >',
+  },
+  {
+    header: 'Remote Jobs',
+    body: ' you are set on your career and want to work remotes, then a remotes job is just the one for you,  clicking here will show you all the current remotes jobs in our platform',
+    button: 'Remote jobs >',
+  },
+];