Built "meet our team" component (#80)

* built meet our team component

* made component more reusable

* Revert "made component more reusable"

This reverts commit d72e6ca.

* updated branch

* managing conflicts

* trying to pass CLI test

* again, trying to pass cli test

* deleted package lock and yarn.lock

* app.js fixed

* added missing dependency

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

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emailjs/browser": "^3.7.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -66,4 +67,4 @@
     "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.1.8"
   }
-}
+}

src/App.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import Hero from './components/Hero/Hero';
+import MeetOurTeam from './components/MeetOurTeam/MeetOurTeam';
+import {teamMembers} from "./data/teamData";
 import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
 import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
 import {showCaseData} from "./data/showCaseData"
@@ -24,6 +26,7 @@ function App() {
       <HowItWorks/>
       <CompanyShowcaseComponent showCaseData={showCaseData}/>
       <LatestJobs data={data} headers={header} />
+      <MeetOurTeam teamMembers={teamMembers}/>
       <WyChooseUs />
       <Experience/>
       <Education/>

src/components/LatestJob/LatestJobs.js

@@ -30,7 +30,7 @@ const LatestJobs = ({ headers, data }) => {
                     return <td />;
                   }
                   return (
-                    <th scope="col" className="py-3 px-6 small:py-2 small:px-3">
+                    <th key={header} scope="col" className="py-3 px-6 small:py-2 small:px-3">
                       {header}
                     </th>
                   );

src/components/MeetOurTeam/MeetOurTeam.jsx

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
+
+function MeetOurTeam({teamMembers}){
+    const memberCard = teamMembers.map((member)=>{
+        return(
+         <div className="m-4"key={member.name}>
+            <img className="rounded-full" src={member.src} alt={`${member.name} png`}/>
+            <h3 className="text-3xl font-semibold text-accent m-2 text-center">{member.name}</h3>
+            <h2 className="text-lg text-gray text-center">{member.position} 
+             <span className='m-2'>
+              <a href={member.linkedin} rel="noreferrer" target="_blank">
+                <FontAwesomeIcon icon={faLinkedin} className='hover:text-blue-500 '/>
+               </a>
+             </span>
+            </h2>  
+         </div>
+        )
+    })
+    return (
+        <section className="bg-gray-500/5">
+          <h1 className="text-5xl text-secondary text-center py-8 font-semibold"> 
+          Meet Our <span className="text-accent">Team</span></h1>
+          <div className="grid md:grid-cols-3 place-content-center gap-x-20 gap-y-8 px-10">
+            {memberCard}
+          </div>
+        </section>
+    )
+}
+
+export default MeetOurTeam;

src/components/MeetOurTeam/_test_/MeetOurTeam.test.jsx

@@ -0,0 +1,10 @@
+import renderer from 'react-test-renderer';
+import MeetOurTeam from '../MeetOurTeam.jsx';
+import {teamMembers} from "../../../data/teamData";
+
+it('renders Meet Our Team component correctly', () => {
+    const tree = renderer
+      .create(<MeetOurTeam teamMembers={teamMembers}/>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });