updated jobcards
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m26s

This commit is contained in:
christian 2024-06-09 08:27:12 +02:00
parent 29a4d0be05
commit 6392e689e3
2 changed files with 43 additions and 53 deletions

View File

@ -1,17 +1,36 @@
import { Job } from "../page"; interface JobPosting {
title: string;
logo: string;
company: string;
location: string;
type: string;
description: string;
link: string;
skills: {
react: boolean;
python: boolean;
golang: boolean;
svelte: boolean;
nextjs: boolean;
typescript: boolean;
tailwind: boolean;
};
}
export default async function JobCard(props: { job: JobPosting }) {
const { title, logo, company, location, type, description, link, skills } =
export default async function JobCard(props: {job: Job}) { props.job;
const { title, company, date_posted, description, img, link, location, url } = props.job; return (
return ( <div className="flex flex-col items-center justify-center w-full h-full p-4">
<JobTitle /> <h2 className="text-2xl">{title}</h2>
<JobImage /> <p>
<JobCompany company={company} companyUrl={url} /> {company} - {location}
<JobDatePosted date_posted={date_posted} /> </p>
<JobDescription description={desc} /> <p>{type}</p>
<JobLink /> <p>{description.slice(0, 400)}...</p>
<JobLocation /> <a href={link} target="_blank" rel="noopener noreferrer">
Link
) </a>
} </div>
);
}

View File

@ -1,8 +1,7 @@
"use client"; import { revalidatePath } from "next/cache";
import { useState, useEffect } from "react"; import JobCard from "./_jobcard/JobCard";
interface JobPosting { interface JobPosting {
id: number; // Assuming each job has an id
title: string; title: string;
logo: string; logo: string;
company: string; company: string;
@ -26,44 +25,16 @@ async function fetchJobs(): Promise<JobPosting[]> {
if (!response.ok) { if (!response.ok) {
throw new Error("Failed to fetch jobs"); throw new Error("Failed to fetch jobs");
} }
revalidatePath("/");
return response.json(); return response.json();
} }
export default function Home() { export default async function Home() {
const [jobs, setJobs] = useState<JobPosting[]>([]); const jobs = await fetchJobs();
useEffect(() => {
const getJobs = async () => {
try {
const jobsData = await fetchJobs();
setJobs(jobsData);
} catch (error) {
console.error("Error fetching jobs:", error);
}
};
getJobs();
}, []);
return ( return (
<main className=""> <main>
{jobs.map((job) => ( {jobs.map((job, i) => (
<div key={job.id}> <JobCard key={i} job={job} />
<h2>{job.title}</h2>
<p>
{job.company} - {job.location}
</p>
<p>{job.type}</p>
<p>{job.description}</p>
<a href={job.link} target="_blank" rel="noopener noreferrer">
Link
</a>
<p>
Skills:{" "}
{Object.keys(job.skills)
.filter((skill) => job.skills[skill as keyof typeof job.skills])
.join(", ")}
</p>
</div>
))} ))}
</main> </main>
); );