Company showcase component (#68)

* starter code for the company showcase component

* 70 percent done with building the company showcase component

* design completed

* created company showcase component

* Completed

* Revert "Completed"

This reverts commit 0841c4c.

* implemented requested changes and made component more reusable

* updated snapshot test

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

src/App.jsx

@@ -1,5 +1,8 @@
+import React from 'react';
 import Hero from './components/Hero/Hero';
 import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
+import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
+import {showCaseData} from "./data/showCaseData"
 import './App.css';
 import LatestJobs from './components/LatestJob/LatestJobs';
 
@@ -15,6 +18,7 @@ function App() {
   return (
     <div>
       <Hero />
+      <CompanyShowcaseComponent showCaseData={showCaseData}/>
       <LatestJobs data={data} headers={header} />
       <WyChooseUs />
     </div>

src/components/companyShowcaseComponent/CompanyShowcaseComponent.jsx

@@ -0,0 +1,33 @@
+function CompanyShowcaseComponent({showCaseData}) {
+
+  const topRowComanpies = showCaseData.companies.slice(0,5).map((company)=>{
+    return(
+      <a key={`${company}`} className="w-50" rel="noreferrer" target="_blank" href={`https://www.${company}.com`}> 
+       <img className="hover:scale-75" src={`/assets/company-showcase-component-assets/${company}.png`} alt={`${company}s logo`}/> 
+      </a>
+    );    
+  })
+
+  const bottomRowComanpies = showCaseData.companies.slice(5,10).map((company)=>{
+    return(
+      <a key={`${company}`} className="w-50" rel="noreferrer" target="_blank" href={`https://www.${company}.com`}> 
+       <img className="hover:scale-75" src={`/assets/company-showcase-component-assets/${company}.png`} alt={`${company}s logo`}/> 
+      </a>
+    );    
+  })
+
+  return (
+     <section className = "flex flex-col bg-gray-500/5 justify-center items-center"> 
+      <div className="grid grid-cols-5 grid-rows-2 gap-x-5 place-content-center items-center w-4/6">
+       <h2 className="font-inter text-blue-900 font-semibold self-end text-xs mt-5 mb-5 md:text-2xl col-span-5">
+        {showCaseData.header}</h2>
+        {topRowComanpies}
+      </div>
+      <div className="grid grid-cols-4 gap-x-5 place-content-center items-center w-5/6">
+       {bottomRowComanpies}
+      </div>
+     </section>
+  );
+}
+
+export default CompanyShowcaseComponent;

src/components/companyShowcaseComponent/_test_/CompanyShowcaseComponent.test.jsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import CompanyShowcaseComponent from "../CompanyShowcaseComponent.jsx"
+import {showCaseData} from "../../../data/showCaseData"
+
+it('renders Company Showcase Component correctly', () => {
+    const tree = renderer
+      .create(<CompanyShowcaseComponent showCaseData={showCaseData}/>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+

src/components/companyShowcaseComponent/_test_/__snapshots__/CompanyShowcaseComponent.test.jsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Company Showcase Component correctly 1`] = `
+<section
+  className="flex flex-col bg-gray-500/5 justify-center items-center"
+>
+  <div
+    className="grid grid-cols-5 grid-rows-2 gap-x-5 place-content-center items-center w-4/6"
+  >
+    <h2
+      className="font-inter text-blue-900 font-semibold self-end text-xs mt-5 mb-5 md:text-2xl col-span-5"
+    >
+      More than 20,000 companies are using our service to hire their employees.
+    </h2>
+    <a
+      className="w-50"
+      href="https://www.facebook.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="facebooks logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/facebook.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.amazon.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="amazons logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/amazon.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.microsoft.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="microsofts logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/microsoft.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.apple.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="apples logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/apple.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.google.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="googles logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/google.png"
+      />
+    </a>
+  </div>
+  <div
+    className="grid grid-cols-4 gap-x-5 place-content-center items-center w-5/6"
+  >
+    <a
+      className="w-50"
+      href="https://www.airbnb.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="airbnbs logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/airbnb.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.spotify.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="spotifys logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/spotify.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.yahoo.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="yahoos logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/yahoo.png"
+      />
+    </a>
+    <a
+      className="w-50"
+      href="https://www.netflix.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="netflixs logo"
+        className="hover:scale-75"
+        src="/assets/company-showcase-component-assets/netflix.png"
+      />
+    </a>
+  </div>
+</section>
+`;

src/data/showCaseData.js

@@ -0,0 +1,14 @@
+export const showCaseData=
+{"header":"More than 20,000 companies are using our service to hire their employees.",
+"companies":[ 
+    "facebook",
+    "amazon",
+    "microsoft",
+    "apple",
+    "google",
+    "airbnb",
+    "spotify",
+    "yahoo",
+    "netflix"
+]   
+}

yarn.lock

@@ -8602,16 +8602,17 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-hook-form@^7.38.0:
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.38.0.tgz#53d6a68df587ce4ce88352f63e0ecc7fc8779320"
-  integrity sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==
 
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-hook-form@^7.38.0:
+  version "7.38.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.38.0.tgz#53d6a68df587ce4ce88352f63e0ecc7fc8779320"
+  integrity sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8622,6 +8623,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-redux@^8.0.1:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a"