before adding routing

pradius · Aug 3, 2024 · 595070b · 595070b
1 parent f96af33
commit 595070b
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 154 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,124 +1,24 @@
 import Navbar from "./components/Navbar";
 import Hero from "./components/Hero";
 import HomeCards from "./components/HomeCards";
+import JobListings from "./components/JobListings";
+import ViewAllJobs from "./components/ViewAllJobs";
 
 const App = () => {
   return (
     <>
       <Navbar />
       <Hero title='Become a React Dev' subtitle='Find the React job that fits your skills and needs!'/>
       <HomeCards />
-
-
-      {/* <!-- Browse Jobs --> */}
-      <section className="bg-blue-50 px-4 py-10">
-        <div className="container-xl lg:container m-auto">
-          <h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
-            Browse Jobs
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {/* <!-- Job Listing 1 --> */}
-            <div className="bg-white rounded-xl shadow-md relative">
-              <div className="p-4">
-                <div className="mb-6">
-                  <div className="text-gray-600 my-2">Full-Time</div>
-                  <h3 className="text-xl font-bold">Senior React Developer</h3>
-                </div>
-
-                <div className="mb-5">
-                  We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
-                </div>
-
-                <h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
-
-                <div className="border border-gray-100 mb-5"></div>
-
-                <div className="flex flex-col lg:flex-row justify-between mb-4">
-                  <div className="text-orange-700 mb-3">
-                    <i className="fa-solid fa-location-dot text-lg"></i>
-                    Boston, MA
-                  </div>
-                  <a
-                    href="job.html"
-                    className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
-                  >
-                    Read More
-                  </a>
-                </div>
-              </div>
-            </div>
-            {/* <!-- Job Listing 2 --> */}
-            <div className="bg-white rounded-xl shadow-md relative">
-              <div className="p-4">
-                <div className="mb-6">
-                  <div className="text-gray-600 my-2">Remote</div>
-                  <h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
-                </div>
-
-                <div className="mb-5">
-                  Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
-                </div>
-
-                <h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
-
-                <div className="border border-gray-100 mb-5"></div>
-
-                <div className="flex flex-col lg:flex-row justify-between mb-4">
-                  <div className="text-orange-700 mb-3">
-                    <i className="fa-solid fa-location-dot text-lg"></i>
-                    Miami, FL
-                  </div>
-                  <a
-                    href="job.html"
-                    className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
-                  >
-                    Read More
-                  </a>
-                </div>
-              </div>
-            </div>
-            {/* <!-- Job Listing 3 --> */}
-            <div className="bg-white rounded-xl shadow-md relative">
-              <div className="p-4">
-                <div className="mb-6">
-                  <div className="text-gray-600 my-2">Remote</div>
-                  <h3 className="text-xl font-bold">React.js Developer</h3>
-                </div>
-
-                <div className="mb-5">
-                  Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
-                </div>
-
-                <h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
-
-                <div className="border border-gray-100 mb-5"></div>
-
-                <div className="flex flex-col lg:flex-row justify-between mb-4">
-                  <div className="text-orange-700 mb-3">
-                    <i className="fa-solid fa-location-dot text-lg"></i>
-                    Brooklyn, NY
-                  </div>
-                  <a
-                    href="job.html"
-                    className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
-                  >
-                    Read More
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="m-auto max-w-lg my-10 px-6">
-        <a
-          href="jobs.html"
-          className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
-        >View All Jobs</a      >
-      </section>
+      <JobListings />
+      <ViewAllJobs />  
     </>
   )
 };
 
-export default App;
+export default App;
+
+
+
+// Next Lesson Use State 
+// https://www.youtube.com/watch?v=LDB4uaJ87e0&t=1644s
diff --git a/src/components/HomeCards.tsx b/src/components/HomeCards.tsx
@@ -1,7 +1,6 @@
 import Card from "./Card"
 
 const HomeCards = () => {
-
     return (
         <>
         <section className="py-4">

diff --git a/src/components/JobListing.tsx b/src/components/JobListing.tsx
@@ -0,0 +1,52 @@
+import JobType from "../data/dataTypes/job"
+import { useState } from "react";
+import { FaMapMarker} from "react-icons/fa"
+
+interface JobListingProps {
+    job: JobType;
+  }
+
+const JobListing: React.FC<JobListingProps> = ({ job }) => {
+    const [showFullDescription, setShowFullDescription] = useState(false);
+    let description = job.description;
+
+    if(!showFullDescription)
+    {
+        description = description.substring(0, 100) + "...";
+    }
+
+
+
+    return (
+        <div className="bg-white rounded-xl shadow-md relative">
+            <div className="p-4">
+                <div className="mb-6">
+                    <div className="text-gray-600 my-2">{job.type}</div>
+                    <h3 className="text-xl font-bold">{job.title}</h3>
+                </div>
+
+                <div className="mb-5">{description}</div>
+                <button onClick={() => setShowFullDescription((prevState) => !prevState) } 
+                className="text-indigo-500 mb-5 hover:text-indigo-600">
+                    {showFullDescription ? "Less" : "More"}
+                </button>
+                <h3 className="text-indigo-500 mb-2">{job.salary}/ Year</h3>
+                <div className="border border-gray-100 mb-5"></div>
+
+                <div className="flex flex-col lg:flex-row justify-between mb-4">
+                    <div className="text-orange-700 mb-3">
+                        <FaMapMarker className="inline text-lg mb-1 mr-1" />
+                        {job.location}
+                    </div>
+                    <a
+                        href={`/job/${job.id}`}
+                        className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm">
+                        Read More
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default JobListing;
diff --git a/src/components/JobListings.tsx b/src/components/JobListings.tsx
@@ -0,0 +1,27 @@
+import jobs from "../data/jobs.json"
+import JobType from "../data/dataTypes/job"
+import JobListing from "./JobListing"
+
+const JobListings = () => {
+const recentJob: JobType[] = jobs.slice(0, 3);
+
+  return (
+    <>
+      <section className="bg-blue-50 px-4 py-10">
+        <div className="container-xl lg:container m-auto">
+          <h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
+            Browse Jobs
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+            { recentJob.map((job: JobType) => (
+              <JobListing key={job.id} job={job}  />
+            ))}
+          </div> 
+        </div>
+      </section >
+    </>
+  )
+}
+
+export default JobListings;
diff --git a/src/components/ViewAllJobs.tsx b/src/components/ViewAllJobs.tsx
@@ -0,0 +1,11 @@
+const ViewAllJobs = () => {
+    return (
+        <section className="m-auto max-w-lg my-10 px-6">
+            <a
+                href="/jobs"
+                className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
+            > View All Jobs</a>
+        </section>
+    )
+}
+export default ViewAllJobs;
diff --git a/src/data/dataTypes/job.tsx b/src/data/dataTypes/job.tsx
@@ -0,0 +1,14 @@
+export default interface JobType {
+    id: string;
+    title: string;
+    type: string;
+    description: string;
+    location: string;
+    salary: string;
+    company: {
+      name: string;
+      description: string;
+      contactEmail: string;
+      contactPhone: string;
+    };
+  }