Skip to content

Commit

Permalink
feat: adding job description page
Browse files Browse the repository at this point in the history
  • Loading branch information
JasonNotJson committed Nov 6, 2023
1 parent cac0d44 commit 5741641
Show file tree
Hide file tree
Showing 14 changed files with 421 additions and 167 deletions.
10 changes: 6 additions & 4 deletions apps/career/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useEffect, useContext } from "react"
import { HashRouter, Routes, Route } from "react-router-dom"
import { ThemeContext } from "@app/utils/theme-context"
import Joblist from "@app/components/Joblist"
import Jobdetail from "@app/components/Jobdetail"
import Joblist from "@app/components/joblist/Joblist"
import Jobdetail from "@app/components/jobdetail/Jobdetail"
import { useTranslation } from "react-i18next"
import HeaderWithModal from "@app/components/common/HeaderWithModal"
import Header from "@app/components/common/Header"
import { jobData as job } from "./Data/JobData"
import JobPage from "@app/components/JobPage"

type Props = {}

Expand All @@ -23,7 +24,7 @@ const App = () => {
const PageRoutes = () => {
return (
<Routes>
<Route element={<Joblist />} path="/" />
<Route element={<JobPage />} path="/" />
<Route element={<Jobdetail />} path="/:jobId" />
</Routes>
)
Expand All @@ -48,8 +49,9 @@ const InnerApp = (props: Props) => {
changeLang={(lng) => i18n.changeLanguage(lng)}
/>
</div>
<div className="flex flex-col md:w-3/5 ">
<div className="container mx-auto h-[calc(100vh-150px)]">
{/* md:w-3/5 */}

<PageRoutes />
</div>
</>
Expand Down
10 changes: 5 additions & 5 deletions apps/career/src/Data/JobData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ function generateJobListing() {
const randomIndex = Math.floor(Math.random() * arr.length)
return arr[randomIndex]
}
const jobID : string = generateRandomID()
const title : string = randomElement(titles)
const location : string = randomElement(locations)
const description : string = randomElement(descriptions)
const jobID: string = generateRandomID()
const title: string = randomElement(titles)
const location: string = randomElement(locations)
const description: string = randomElement(descriptions)
const datePosted = new Date(
generateRandomFutureDate(1, 365)
).toLocaleDateString()
Expand All @@ -85,7 +85,7 @@ function generateJobListings(count: number) {
}

// Generate, for example, 10 job listings
export const jobData = generateJobListings(10)
export const jobData = generateJobListings(4)

// Display the generated data
// console.log(jobData)
38 changes: 0 additions & 38 deletions apps/career/src/components/JobCard.tsx

This file was deleted.

7 changes: 6 additions & 1 deletion apps/career/src/components/JobPage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from "react"
import Joblist from "./joblist/Joblist"

function JobPage() {
return <div>JobPage</div>
return (
<>
<Joblist />
</>
)
}

export default JobPage
50 changes: 0 additions & 50 deletions apps/career/src/components/Jobdetail.tsx

This file was deleted.

40 changes: 0 additions & 40 deletions apps/career/src/components/Joblist.tsx

This file was deleted.

30 changes: 30 additions & 0 deletions apps/career/src/components/jobdetail/CompanyOverview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react"

type Props = {}

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="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>
</div>
</>
)
}

export default CompanyOverview
31 changes: 31 additions & 0 deletions apps/career/src/components/jobdetail/JobOverview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react"
import { useParams } from "react-router-dom"
import jobData from "@app/constants/dummy.json"

type Props = {}

const JobOverview = (props: Props) => {
let { jobId } = useParams()

console.log(jobId)

// Find the job that matches the jobID from the URL
const job = jobData.find((j) => j.jobID === jobId)

// 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>
</>
)
}

export default JobOverview
68 changes: 68 additions & 0 deletions apps/career/src/components/jobdetail/Jobdetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from "react"
import CompanyOverview from "./CompanyOverview"
import JobOverview from "./JobOverview"

type Props = {}

const jobdetail = (props: Props) => {
return (
<div className="grid grid-cols-12 gap-y-10 lg:gap-10">
<div className="col-span-10 lg:col-span-3">
<CompanyOverview />
<JobOverview />
</div>
<div className="col-span-12 lg:col-span-9">
<div className="mt-14 rounded-md border border-gray-100/30 dark:border-neutral-600/80">
<div className="relative">
<img
className="img-fluid mb-7 h-[300px] w-[800px] rounded-md"
alt="Image"
src=""
/>
<div className="absolute -bottom-7 left-7 z-20">
<img className="img-fluid mb-7 rounded-md" alt="Image" src="" />
</div>
</div>
</div>
<div className="p-6">
<div className="grid grid-cols-12">
<div className="col-span-12 lg:col-span-8">
<div className="relative">
<h5 className="mb-1 text-gray-900 dark:text-gray-50"> TEST </h5>
</div>
</div>
</div>
<div className="mt-8 grid grid-cols-12 gap-y-3 lg:gap-3">
<div className="col-span-12 lg:col-span-4"></div>
</div>
<div className="mt-5">
<h3 className="mb-3 text-gray-900 dark:text-gray-50">
Job Description
</h3>
<p className="mb-0 text-gray-500 dark:text-gray-300">
Descriptions
</p>
</div>
<div className="mt-5">
<h3 className="mb-3 text-gray-900 dark:text-gray-50">
Responsibilities
</h3>
<p className="mb-0 text-gray-500 dark:text-gray-300">
Descriptions
</p>
</div>
<div className="mt-5">
<h3 className="mb-3 text-gray-900 dark:text-gray-50">
Qualification
</h3>
<p className="mb-0 text-gray-500 dark:text-gray-300">
Descriptions
</p>
</div>
</div>
</div>
</div>
)
}

export default jobdetail
Loading

0 comments on commit 5741641

Please sign in to comment.