feat: finishing job details page

apps/career/src/App.tsx

@@ -49,7 +49,7 @@ const InnerApp = (props: Props) => {
           changeLang={(lng) => i18n.changeLanguage(lng)}
         />
       </div>
-      <div className="container mx-auto h-[calc(100vh-150px)]">
+      <div className="container mx-auto h-[calc(100vh-127px)] overflow-y-auto px-2">
         {/* md:w-3/5 */}
 
         <PageRoutes />

apps/career/src/components/common/Breadcrumbs.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { useLocation, Link } from "react-router-dom"
+
+type props = {
+  job: {
+    jobID: string
+    title: string
+  }
+}
+
+const Breadcrumbs = ({ job }: props) => {
+  const location = useLocation()
+  const pathnames = location.pathname.split("/").filter((x) => x)
+
+  return (
+    <nav aria-label="breadcrumb" className="my-3 text-center">
+      <ol className="inline-flex items-center space-x-2">
+        <li className="inline-flex items-center">
+          <Link
+            to="/"
+            className="text-blue-600 visited:text-purple-600 hover:text-blue-800"
+          >
+            Career List
+          </Link>
+        </li>
+        {pathnames.length > 0 && (
+          <li>
+            <span className="mx-2 text-gray-500">/</span>
+          </li>
+        )}
+        {pathnames.map((name, index) => {
+          const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`
+          const isLast = index === pathnames.length - 1
+          return (
+            <li key={name} className="inline-flex items-center">
+              {isLast ? (
+                <span className="font-bold text-gray-500">{job.title}</span>
+              ) : (
+                <Link
+                  to={routeTo}
+                  className="text-blue-600 hover:text-blue-800"
+                >
+                  {name}
+                </Link>
+              )}
+              {!isLast && <span className="mx-2 text-gray-500">/</span>}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+export default Breadcrumbs

apps/career/src/components/jobdetail/CompanyOverview.tsx

@@ -1,26 +1,73 @@
 import React from "react"
 
-type Props = {}
+type Props = {
+  job: {
+    company: string
+    companyLogo: string
+    website: string
+    companyDescription: string
+  }
+}
+
+const CompanyOverview = ({ job }: Props) => {
+  const jobInformation = [
+    {
+      label: "Company Name",
+      content: job.company,
+    },
+    {
+      label: "Website",
+      content: job.website,
+      isLink: true,
+    },
+    {
+      label: "Description",
+      content: job.companyDescription,
+    },
+    // Add more sections as needed
+  ]
 
-const CompanyOverview = (props: Props) => {
   return (
     <>
-      <h1 className="my-14 text-center text-4xl font-bold">Company Overview</h1>
-      <div className="rounded border border-gray-100/50 dark:border-neutral-600">
+      <div className="mt-14 rounded border border-gray-100/50 dark:border-neutral-600">
+        <h1 className="p-6 text-center text-4xl font-bold">Company Overview</h1>
         <div className="text-center">
-          <div className="mx-auto h-20 w-20 rounded-full"> Image </div>
-          <h3 className="mt-4 mb-0 text-3xl text-gray-900 dark:text-gray-50">
-            Job Title
-          </h3>
-          <p className="mb-4 text-gray-500 dark:text-gray-300">Company name</p>
-          <h3 className="mt-4 mb-0 text-3xl text-gray-900 dark:text-gray-50">
-            Website
-          </h3>
-          <p className="mb-4 text-gray-500 dark:text-gray-300">URL</p>
-          <h3 className="mt-4 mb-0 text-3xl text-gray-900 dark:text-gray-50">
-            Description
-          </h3>
-          <p className="mb-4 text-gray-500 dark:text-gray-300">Description</p>
+          <div className="mx-auto h-[55px] w-[55px] rounded-full">
+            {job.companyLogo && (
+              <div className="">
+                <img
+                  className=" h-[55px] w-[55px] rounded-md object-cover"
+                  alt="Company Logo"
+                  src={job.companyLogo}
+                />
+              </div>
+            )}{" "}
+          </div>
+          {jobInformation.map((info, index) => (
+            <div key={index} className="mt-4">
+              <h3 className="mb-0 text-3xl text-gray-900 dark:text-gray-50">
+                {info.label}
+              </h3>
+              {info.isLink ? (
+                <a
+                  href={
+                    /^https?:\/\//i.test(info.content)
+                      ? info.content
+                      : `http://${info.content}`
+                  }
+                  className="mb-4 text-blue-600 visited:text-purple-600 hover:text-blue-800"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {info.content}
+                </a>
+              ) : (
+                <p className="mb-4 text-gray-500 dark:text-gray-300">
+                  {info.content}
+                </p>
+              )}
+            </div>
+          ))}
         </div>
       </div>
     </>

apps/career/src/components/jobdetail/JobContent.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+
+type Props = {
+  job: {
+    title: string
+    jobDescription: string
+    responsibilities: string
+    qualifications: string
+    appeal: string
+    min_hours: string
+    companyLogo: string
+    heroImage: string
+    location: string
+    salary: string
+  }
+}
+
+const JobContent = ({ job }: Props) => {
+  const jobContentSections = [
+    {
+      title: "Job Title",
+      content: job.title,
+    },
+    {
+      title: "Job Description",
+      content: job.jobDescription,
+    },
+    {
+      title: "Responsibilities",
+      content: job.responsibilities,
+    },
+    {
+      title: "Qualification",
+      content: job.qualifications,
+    },
+    {
+      title: "Appealing Points",
+      content: job.appeal,
+    },
+    {
+      title: "Minimum Work Hours",
+      content: job.min_hours,
+    },
+    {
+      title: "Location",
+      content: job.location,
+    },
+    {
+      title: "Salary",
+      content: job.salary,
+    },
+    // You can add more sections here as needed
+  ]
+  return (
+    <>
+      <div className="mt-14 rounded-md border border-gray-100/30 dark:border-neutral-600/80">
+        <div className="relative">
+          <img
+            className="mb-7 h-[300px] w-[800px] rounded-md"
+            alt="Job Hero Image"
+            src={job.heroImage}
+          />
+          {job.companyLogo && (
+            <div className="absolute -bottom-7 left-7 z-20 ">
+              <img
+                className="mb-7 h-[55px] w-[55px] rounded-md object-cover"
+                alt="Company Logo"
+                src={job.companyLogo}
+              />
+            </div>
+          )}
+        </div>
+        <div className="p-6">
+          {jobContentSections.map((section, index) => (
+            <div key={index} className="mt-5">
+              <h3 className="text-bold mb-3 text-gray-900 dark:text-gray-50">
+                {section.title}
+              </h3>
+              <p className="mb-0 text-gray-500 dark:text-gray-300">
+                {section.content}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="grid grid-cols-12">
+          <div className="col-span-4 col-start-9 mt-8 space-y-2 p-6">
+            <div className="btn w-full border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5">
+              apply now
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default JobContent

apps/career/src/components/jobdetail/JobOverview.tsx

@@ -1,28 +1,96 @@
 import React from "react"
 import { useParams } from "react-router-dom"
 import jobData from "@app/constants/dummy.json"
+import BadgeIcon from "@mui/icons-material/Badge"
+import LocationOnIcon from "@mui/icons-material/LocationOn"
+import HistoryIcon from "@mui/icons-material/History"
+import PaidIcon from "@mui/icons-material/Paid"
 
-type Props = {}
-
-const JobOverview = (props: Props) => {
-  let { jobId } = useParams()
-
-  console.log(jobId)
+type Props = {
+  job: object
+}
 
-  // Find the job that matches the jobID from the URL
-  const job = jobData.find((j) => j.jobID === jobId)
+const jobDetailStructure = [
+  {
+    key: "title",
+    label: "Job Title",
+    icon: (
+      <BadgeIcon
+        fontSize="large"
+        className="rounded-full bg-blue-300 p-2 text-blue-900"
+      />
+    ),
+  },
+  {
+    key: "location",
+    label: "Location",
+    icon: (
+      <LocationOnIcon
+        fontSize="large"
+        className="rounded-full bg-blue-300 p-2 text-blue-900"
+      />
+    ),
+  },
+  {
+    key: "datePosted",
+    label: "Date Posted",
+    icon: (
+      <HistoryIcon
+        fontSize="large"
+        className="rounded-full bg-blue-300 p-2 text-blue-900"
+      />
+    ),
+  },
+  {
+    key: "salary",
+    label: "Salary",
+    icon: (
+      <PaidIcon
+        fontSize="large"
+        className="rounded-full bg-blue-300 p-2 text-blue-900"
+      />
+    ),
+  },
+]
 
+const JobOverview = ({ job }: Props) => {
   // If job doesn't exist, you can handle the null case by rendering something else
   if (!job) {
     return <div>No job found</div>
   }
+
   return (
     <>
-      <div className="my-14 rounded border border-gray-100/50 p-6 dark:border-neutral-600">
-        <h1 className="m-2 text-2xl font-bold">Job Overview</h1>
-        <h2 className="text-2xl font-bold">{job.title}</h2>
-        <div className="font-bold">{job.location}</div>
-        <div className="font-bold">Posted: {job.datePosted}</div>
+      <div className="mt-14 rounded border border-gray-100/30 dark:border-neutral-600/80">
+        <div className="p-6">
+          <h1 className="m-2 text-2xl font-bold">Job Overview</h1>
+          <ul>
+            {jobDetailStructure.map((detail) => {
+              // Check if the job has the property
+              if (!(detail.key in job)) return null
+
+              const value = job[detail.key]
+              return (
+                <li key={detail.key}>
+                  <div className="mt-6 flex items-center">
+                    {detail.icon && <i>{detail.icon}</i>}
+                    <div className="ml-4">
+                      <h2 className="mb-2 text-2xl font-bold">
+                        {detail.label}
+                      </h2>
+                      <h2 className="text-2xl">{value}</h2>
+                    </div>
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+          <div className="mt-8 space-y-2">
+            <div className="btn w-full border-transparent bg-blue-300 p-2  text-xl capitalize text-blue-900 hover:-translate-y-1.5">
+              apply now
+            </div>
+          </div>
+        </div>
       </div>
     </>
   )