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";
export default async function JobCard(props: {job: Job}) {
const { title, company, date_posted, description, img, link, location, url } = props.job;
return (
<JobTitle />
<JobImage />
<JobCompany company={company} companyUrl={url} />
<JobDatePosted date_posted={date_posted} />
<JobDescription description={desc} />
<JobLink />
<JobLocation />
)
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 } =
props.job;
return (
<div className="flex flex-col items-center justify-center w-full h-full p-4">
<h2 className="text-2xl">{title}</h2>
<p>
{company} - {location}
</p>
<p>{type}</p>
<p>{description.slice(0, 400)}...</p>
<a href={link} target="_blank" rel="noopener noreferrer">
Link
</a>
</div>
);
}

View File

@ -1,8 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import { revalidatePath } from "next/cache";
import JobCard from "./_jobcard/JobCard";
interface JobPosting {
id: number; // Assuming each job has an id
title: string;
logo: string;
company: string;
@ -26,44 +25,16 @@ async function fetchJobs(): Promise<JobPosting[]> {
if (!response.ok) {
throw new Error("Failed to fetch jobs");
}
revalidatePath("/");
return response.json();
}
export default function Home() {
const [jobs, setJobs] = useState<JobPosting[]>([]);
useEffect(() => {
const getJobs = async () => {
try {
const jobsData = await fetchJobs();
setJobs(jobsData);
} catch (error) {
console.error("Error fetching jobs:", error);
}
};
getJobs();
}, []);
export default async function Home() {
const jobs = await fetchJobs();
return (
<main className="">
{jobs.map((job) => (
<div key={job.id}>
<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>
{jobs.map((job, i) => (
<JobCard key={i} job={job} />
))}
</main>
);