Merge pull request #58 from stefanv/expired-banner

Add expiration banner

Author: stefanv

src/components/Job.jsx

@@ -8,6 +8,12 @@ import jobToMarkdown from "../jobToMarkdown.mjs";
 const Job = ({ job }) => {
   const processedJob = React.useMemo(() => jobToMarkdown(job), [job]);
 
+  const isExpired = React.useMemo(() => {
+    if (!processedJob || !processedJob.expires) return false;
+    const today = new Date();
+    return new Date(`${processedJob.expires}T23:59:59.999-12:00`) < today;
+  }, [processedJob]);
+
   if (processedJob === undefined) {
     console.log("We don't expect an empty job posting; aborting");
     return <div>Empty job posting</div>;
@@ -51,6 +57,11 @@ const Job = ({ job }) => {
           </div>
         }
       </div>
+      {isExpired && (
+        <div className="expired-banner">
+          This job post has expired and is no longer open for applications.
+        </div>
+      )}
       <div
         className="description"
         dangerouslySetInnerHTML={{__html: processedJob.description}}

src/styles/global.css

@@ -27,7 +27,6 @@ li {
 a {
   color: #2c3e50;
   font-weight: bold;
-  text-decoration: none;
 }
 .page {
 }
@@ -114,8 +113,18 @@ a {
   bottom: 1rem;
   right: 1rem;
 }
+.expired-banner {
+  background-color: #f8d7da;
+  color: #721c24;
+  padding: 0.5rem;
+  margin-bottom: 0.75rem;
+  margin-top: 1rem;
+  border-radius: 4px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 0.9rem;
+}
 .job a {
-  text-decoration: none;
 }
 .job .meta a {
   font-weight: normal;