updated jobcards

src/app/_jobcard/JobCard.tsx

@@ -1,17 +1,36 @@
-import { Job } from "../page";
+interface JobPosting {
-
+  title: string;
-
+  logo: string;
-
+  company: string;
-export default async function JobCard(props: {job: Job}) {
+  location: string;
-    const { title, company, date_posted, description, img, link, location, url } = props.job;
+  type: string;
-    return (
+  description: string;
-        <JobTitle />
+  link: string;
-        <JobImage />
+  skills: {
-        <JobCompany company={company} companyUrl={url} />
+    react: boolean;
-        <JobDatePosted date_posted={date_posted} />
+    python: boolean;
-        <JobDescription description={desc} />
+    golang: boolean;
-        <JobLink />
+    svelte: boolean;
-        <JobLocation />
+    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>
+  );
 }

src/app/page.tsx

@@ -1,8 +1,7 @@
-"use client";
+import { revalidatePath } from "next/cache";
-import { useState, useEffect } from "react";
+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() {
+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 (
-    <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>
   );