jobs page MVP

components/jobcard.js

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+import styles from '../styles/jobs.module.scss';
+
+export default function JobCard({ job }) {
+    return (
+        <>
+            <div className={styles.jobInfo}>
+                <Link href={job.job_url}><a><h2>{job.title}</h2></a></Link>
+                <h3>{job.company}</h3>
+                <h4>{job.location}</h4>
+                <h4>Date Posted: {job.date_posted}</h4>
+            </div>
+        </>
+    )
+}

pages/jobs.js

@@ -0,0 +1,31 @@
+import JobCard from '../components/jobcard.js';
+
+import styles from '../styles/jobs.module.scss';
+
+export default function Podcast({ jobs }) {
+    return (
+        <div className={styles.allJobs}>
+            {jobs.map((job, index) => (
+                <JobCard job={job} />
+            ))}
+        </div>
+    );
+}
+
+export async function getServerSideProps() {
+    let final;
+    let jobs;
+
+    await fetch(`https://api.ethancedwards.com/jobs/v1`).then((res) => {
+        if (!res.ok) {
+            // TODO: make fake job saying error
+            // final = { }
+        } else {
+            final = res.json();
+        }
+    });
+
+    jobs = await final;
+
+    return { props: { jobs } };
+}

styles/jobs.module.scss

@@ -0,0 +1,18 @@
+
+.jobInfo {
+  color: black;
+  border-style: solid;
+  border-color: lightblue;
+  padding: 5px;
+  margin: 10px;
+
+  flex-basis: calc(100% / 5);
+}
+
+.allJobs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  // justify-content: space-evenly;
+  align-content: space-between;
+}