From 5b91179ba35d85f10a2c5952c84470dab720a28b Mon Sep 17 00:00:00 2001
From: ljc1991 <ljc19911551@gmail.com>
Date: Sat, 28 Oct 2023 21:51:27 +0800
Subject: [PATCH] wip

---
 homepage/src/components/cards/card.jsx |  5 +++-
 homepage/src/lib/processCardData.js    | 32 ++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/homepage/src/components/cards/card.jsx b/homepage/src/components/cards/card.jsx
index 929c635d..8dfb5d68 100644
--- a/homepage/src/components/cards/card.jsx
+++ b/homepage/src/components/cards/card.jsx
@@ -8,7 +8,10 @@ const Card = ({ card }) => {
   } else {
     return (
       <div className="col-md-4 mb-3" id={card.data.id}>
-        <div className="section-main">
+        <div
+          className="section-main"
+          style={{ backgroundColor: `${card.data.color.background}` }}
+        >
           <h3>{card.data.title}</h3>
           <div>
             <div className="image-container">
diff --git a/homepage/src/lib/processCardData.js b/homepage/src/lib/processCardData.js
index c724b5b4..c23c043b 100644
--- a/homepage/src/lib/processCardData.js
+++ b/homepage/src/lib/processCardData.js
@@ -69,6 +69,38 @@ export function processCardData(data) {
     };
   }
   // project card
+  const jobCards = data.type === 'job';
+
+  if (data.type === 'project') {
+    const color = {};
+    const mainTag = data.tags.find((tag) =>
+      ['open gov', 'open data', 'open source'].includes(tag),
+    );
+    switch (mainTag) {
+      case 'open gov':
+        color.background = '#efac49';
+        break;
+      case 'open data':
+        color.background = '#73a09b';
+        break;
+      case 'open source':
+        color.background = '#9b2123';
+        break;
+      default:
+        color.background = '#ffffff';
+    }
+
+    const tags = data.tags || [];
+    const avatarList = tags.map((tag) => {
+      const jobCard = jobCards.find((jobCard) => jobCard.data.tags[0] === tag);
+      return jobCard ? jobCard.data : null;
+    });
+
+    data = {
+      ...data,
+      color,
+    };
+  }
 
   return {
     ...data,