add: Jobs/internship page (#196)

* Add categories section * Update packages * Add Categories component * Add styled components * Add functionalities * Update to fit functionlities * Add image and video demo * Apply reset functionality on category change * fix: quiz design * fix: conflicts - package-lock.json file * Initial commit * Add Community Page section * Update dependencies * Update package-lock.json * Update package.json * Update Community.jsx * Update CommunityElements.jsx * Make Quiz Category responsive * Update dependencies * Fix mobile quiz dropdown spacing * Update dependencies * Update package-lock.json * Update Categories.jsx * Update CategoriesButtons.jsx * Update CategoriesElements.jsx * Fix Navbar toggle bug * Update dependencies * Update dependencies * Update package-lock.json * Initial commit * Start building Jobs section * Update dependencies * Add Jobs/Internship page * Update dependencies * Update package-lock.json * Update package-lock.json * Update package.json * fix & refractor data and code * Update App.jsx * Update Navbar.jsx Co-authored-by: Kabir <44284877+kabir0x23@users.noreply.github.com>
thecyberworld · Oct 16, 2022 · 96968e4 · 96968e4
1 parent 588dc10
commit 96968e4
Show file tree

Hide file tree

Showing 6 changed files with 565 additions and 11 deletions.
diff --git a/src/components/Community/CommunityElements.jsx b/src/components/Community/CommunityElements.jsx
@@ -10,6 +10,7 @@ export const Header = styled.header`
   justify-content: center;
   align-items: center;
   height: 100vh;
+  position: relative;
 `;
 
 export const Overlay = styled.div`

diff --git a/src/components/Homepage/Info/Info.jsx b/src/components/Homepage/Info/Info.jsx
@@ -20,7 +20,7 @@ import {
     Img,
     ScrollText,
 } from "./InfoElements";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const InfoSection = ({
                          id,

diff --git a/src/components/Prep/Jobs/Job.jsx b/src/components/Prep/Jobs/Job.jsx
@@ -0,0 +1,69 @@
+import {
+  JobContainer,
+  JobHero,
+  JobHeader,
+  JobTitle,
+  JobRole,
+  JobRoleTitle,
+  JobRating,
+  JobLocation,
+  JobDetails,
+  JobReq,
+  JobTimeline,
+} from "./JobsElements";
+
+import { FaEllipsisV } from "react-icons/fa";
+
+export default function Job(props) {
+  return (
+    <>
+      <JobContainer>
+        <JobHero>
+          <JobHeader>
+            {props.status && <span className="status">{props.status}</span>}
+            <JobTitle>{props.jobTitle}</JobTitle>
+            <JobRole>
+              <JobRoleTitle>{props.jobRoleTitle}</JobRoleTitle>
+              <JobRating>{props.jobRating}</JobRating>
+            </JobRole>
+            <JobLocation>
+              <span>{props.jobLocation}</span>
+            </JobLocation>
+          </JobHeader>
+          <FaEllipsisV />
+        </JobHero>
+        <JobDetails>
+          {props.jobDetails.map((item, i) => (
+            <div key={i}>
+              <span>{item.item}</span>
+              {item.badge && (
+                <div className="badge">
+                  <span>{item.badge}</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </JobDetails>
+        <JobDetails>
+          {props.jobDetails2.map((item, i) => (
+            <div key={i}>
+              <span>{item}</span>
+            </div>
+          ))}
+        </JobDetails>
+        <JobReq>
+          <ul>
+            {props.jobReq.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </JobReq>
+        <JobTimeline>
+          <span>{props.jobTimeline.datePosted}</span>
+          <span className="dot">{props.jobTimeline.separator}</span>
+          <span>From <span className="remote">{props.jobTimeline.directory}</span></span>
+        </JobTimeline>
+      </JobContainer>
+    </>
+  );
+}
diff --git a/src/components/Prep/Jobs/Jobs.jsx b/src/components/Prep/Jobs/Jobs.jsx
@@ -1,14 +1,67 @@
-import React from 'react';
-import {Section} from "../../Resources/WriteUps/WriteUpsElements";
+import { useState, useCallback } from "react";
+import { Link as ScrollLink } from "react-scroll";
+
+import {
+  Overlay,
+  Container,
+  Heading,
+  Paragraph,
+} from "../../Community/CommunityElements";
+import {ScrollButton, JobIntroHeader, JobsDropdownIcon} from "./JobsElements";
+
+import Job from "./Job";
+import { JobsData } from "./JobsData";
+import { JobSection } from "./JobsElements";
+
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+// import { auto } from "@popperjs/core";
 
 const Jobs = () => {
-    return (
-        <Section>
-            <h1>
-                Under Development
-            </h1>
-        </Section>
-    );
+  const [viewMore, setViewMore] = useState(false);
+
+  const toggleViewMore = useCallback(() => {
+    setViewMore((prevView) => !prevView);
+  }, []);
+
+  const allJobs = JobsData.map((data) => <Job key={data.id} {...data} />);
+
+  return (
+    <JobSection viewMore={viewMore}>
+      <JobIntroHeader>
+        <Overlay />
+        <Container>
+          <Heading>
+            Searching for a job? <br /> Look no further!
+          </Heading>
+          <Paragraph>
+            We have collated several areas/field where there are job
+            vacancy(ies). <br /> Go through the <span>Job Section</span>, and
+            find one that is best match for you.
+          </Paragraph>
+          <ScrollLink to={"jobs"} smooth={true} duration={600} spy={true} exact={"true"} offset={-80}>
+            <ScrollButton>
+              <span>Find A Job</span>
+              <JobsDropdownIcon />
+            </ScrollButton>
+          </ScrollLink>
+        </Container>
+      </JobIntroHeader>
+
+      <Heading>Dummy data right not, will update the real data soon.</Heading>
+
+      <div id="jobs" className="grid">
+        {allJobs}
+      </div>
+
+      <button className="view" onClick={toggleViewMore}>
+        {!viewMore ? (
+          <FaChevronDown size={20} style={{ color: "white" }} />
+        ) : (
+          <FaChevronUp size={20} style={{ color: "white" }} />
+        )}
+      </button>
+    </JobSection>
+  );
 };
 
-export default Jobs;
+export default Jobs;
diff --git a/src/components/Prep/Jobs/JobsData.jsx b/src/components/Prep/Jobs/JobsData.jsx
@@ -0,0 +1,213 @@
+import {
+    FaStar,
+    FaBriefcase,
+    FaClock,
+    FaTelegramPlane,
+    FaBolt,
+    FaCircle,
+    FaMoneyCheckAlt,
+    FaUserPlus,
+} from "react-icons/fa";
+
+const iconSize = 15;
+
+export const JobsData = [
+    {
+        id: "Data Analysts",
+        status: "new",
+        jobTitle: "Data Analysts",
+        jobRoleTitle: "Cloudstaff",
+        jobRating: (<> 4.1 <FaStar size={iconSize} style={{color: "orange"}}/> </>),
+        jobLocation: "Remote",
+        jobDetails: [
+            {item: (<> <FaMoneyCheckAlt size={iconSize}/> $10,000 - $40,000 a month </>),},
+            {item: (<> <FaBriefcase size={iconSize}/> Full-time </>),},
+            {item: (<> <FaClock size={iconSize}/> Morning shift </>),},
+        ],
+        jobDetails2: [
+            <> <FaTelegramPlane size={iconSize} style={{color: "#20c20e"}}/> Apply securely with Indeed Resume </>,
+            <> <FaBolt size={iconSize} style={{color: "#20c20e"}}/> Responsive employer </>,
+        ],
+        jobReq: [
+            <>Technical expertise in data models, database design development, data mining, and segmentation technique.</>,
+            <>Strong knowledge of and experience with reporting packages (Business Objects, etc.), databases...</>,
+        ],
+        jobTimeline: {
+            datePosted: "Posted 3 days ago",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+    {
+        id: "Content Copywriter",
+        jobTitle: "Content Copywriter for travel blog",
+        jobRoleTitle: "Trip101 Pte ltd",
+        jobRating: (<>5.0<FaStar size={iconSize} style={{color: "orange"}}/></>),
+        jobLocation: "India",
+        jobDetails: [
+            {
+                item: (<><FaMoneyCheckAlt size={iconSize}/>$7000 - $30,000 a month</>),
+            },
+            {
+                badge: "1",
+                item: (<><FaBriefcase size={iconSize}/>Part-time</>),
+            },
+            {
+                badge: "2",
+                item: (<><FaClock size={iconSize}/>Weekend availability</>),
+            },
+        ],
+        jobDetails2: [
+            <><FaClock size={iconSize} style={{color: "orange"}}/>Urgently hiring</>,
+            <><FaUserPlus size={iconSize} style={{color: "orange"}}/>Hiring multiple candidates</>,
+        ],
+        jobReq: [
+            <>Produce a minimum of 5 articles per month.</>,
+            <>Curate travel content for a global readership.</>,
+            <>Research relevant facts and details to drive informative, engaging, and inspirational articles</>,
+        ],
+        jobTimeline: {
+            datePosted: "Hiring ongoing",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+    {
+        id: "Frontend Engineer",
+        jobTitle: "Frontend Engineer",
+        jobRoleTitle: "Thecyberhub",
+        jobRating: (<>5.0<FaStar size={iconSize} style={{color: "orange"}}/></>),
+        jobLocation: "Hybrid",
+        jobDetails: [
+            {
+                item: (<><FaMoneyCheckAlt size={iconSize}/>$10,000 - $35,000 a month</>),
+            },
+            {
+                badge: "3",
+                item: (<><FaBriefcase size={iconSize}/>Full-time</>),
+            },
+        ],
+        jobDetails2: [
+            <><FaTelegramPlane size={iconSize} style={{color: "#20c20e"}}/>Apply securely with Indeed Resume</>,
+            <><FaBolt size={iconSize} style={{color: "#20c20e"}}/>Responsive employe</>,
+            <><FaUserPlus size={iconSize} style={{color: "orange"}}/>Hiring multiple candidates</>,
+        ],
+        jobReq: [
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit, Mollitia expedita perferendis neque.</>,
+        ],
+        jobTimeline: {
+            datePosted: "Hiring ongoing",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+    {
+        id: "Backend Engineer",
+        jobTitle: "Backend Engineer",
+        jobRoleTitle: "Thecyberhub",
+        jobRating: (<>4.6<FaStar size={iconSize} style={{color: "orange"}}/></>),
+        jobLocation: "Remote",
+        jobDetails: [
+            {
+                item: (<><FaMoneyCheckAlt size={iconSize}/>$10,000 - $20,000 a month</>),
+            },
+            {
+                badge: "4",
+                item: (<><FaBriefcase size={iconSize}/>Part-time</>),
+            },
+            {
+                badge: "2",
+                item: (<><FaClock size={iconSize}/>Weekend availability</>),
+            },
+        ],
+        jobDetails2: [
+            <><FaTelegramPlane size={iconSize} style={{color: "#20c20e"}}/>Apply securely with Indeed Resume</>,
+            <><FaBolt size={iconSize} style={{color: "#20c20e"}}/>Responsive employer</>,
+            <><FaUserPlus size={iconSize} style={{color: "orange"}}/>Hiring multiple candidates</>,
+        ],
+        jobReq: [
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit, Mollitia expedita perferendis neque.</>,
+        ],
+        jobTimeline: {
+            datePosted: "Hiring ongoing",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+    {
+        id: "Product Designer",
+        jobTitle: "Product Designer",
+        jobRoleTitle: "Thecyberhub",
+        jobRating: (<>4.8<FaStar size={iconSize} style={{color: "orange"}}/></>),
+        jobLocation: "Hybrid",
+        jobDetails: [
+            {
+                item: (
+                    <><FaMoneyCheckAlt size={iconSize}/>$10,000 - $40,000 a month</>),
+            },
+            {
+                badge: "4",
+                item: (<><FaBriefcase size={iconSize}/>Full-time</>),
+            },
+            {
+                item: (<><FaClock size={iconSize}/>Morning shift</>),
+            },
+        ],
+        jobDetails2: [
+            <><FaClock size={iconSize} style={{color: "orange"}}/>Urgently hiring</>,
+            <><FaTelegramPlane size={iconSize} style={{color: "#20c20e"}}/>Apply securely with Indeed Resume</>,
+            <><FaBolt size={iconSize} style={{color: "#20c20e"}}/>Responsive employer</>,
+            <><FaUserPlus size={iconSize} style={{color: "orange"}}/>Hiring multiple candidates</>,
+        ],
+        jobReq: [
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit, Mollitia expedita perferendis neque.</>,
+        ],
+        jobTimeline: {
+            datePosted: "Hiring ongoing",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+    {
+        id: "DevOps Engineer",
+        jobTitle: "DevOps Engineer",
+        jobRoleTitle: "Thecyberhub",
+        jobRating: (<>5.0<FaStar size={iconSize} style={{color: "orange"}}/></>),
+        jobLocation: "U.S.A",
+        jobDetails: [
+            {
+                item: (<><FaMoneyCheckAlt size={iconSize}/>$10,000 - $50,000 a month</>),
+            },
+            {
+                badge: "5",
+                item: (<><FaBriefcase size={iconSize}/>Full-time</>),
+            },
+            {
+                badge: "2",
+                item: (<><FaClock size={iconSize}/>Morning shift</>),
+            },
+        ],
+        jobDetails2: [
+            <><FaClock size={iconSize} style={{color: "orange"}}/>Urgently hiring</>,
+            <><FaTelegramPlane size={iconSize} style={{color: "#20c20e"}}/>Apply securely with Indeed Resume</>,
+            <><FaBolt size={iconSize} style={{color: "#20c20e"}}/>Responsive employer</>,
+            <><FaUserPlus size={iconSize} style={{color: "orange"}}/>Hiring multiple candidates</>,
+        ],
+        jobReq: [
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit.</>,
+            <>Lorem ipsum dolor sit amet consectetur adipisicing elit, Mollitia expedita perferendis neque.</>,
+        ],
+        jobTimeline: {
+            datePosted: "Hiring ongoing",
+            separator: (<><FaCircle/></>),
+            directory: "remote",
+        },
+    },
+];