From 9046f5cc95289eb6e5a9e93e2da8a4eda74cb5ff Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 10 Feb 2024 13:15:02 -0800
Subject: refactored some components - added DiscordStatus to about - Updated
 projects - Added tags to each project - Fixed some text styling

---
 src/components/Card.astro | 43 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

(limited to 'src/components/Card.astro')

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 7bad586..a5b3b6d 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -3,25 +3,42 @@ interface Props {
   title: string;
   body: string;
   href: string;
+  year?: string;
   language: string;
   languageColor: string;
-  logoSrc?: string; 
-  logoWidth?: string;
   contribution?: string;
+  tags?: string[];
 }
 
-const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%', contribution="" } = Astro.props;
+const {
+  href,
+  title,
+  body,
+  language,
+  languageColor,
+  contribution = "",
+  year,
+  tags,
+} = Astro.props;
 ---
 
 <li class="link-card">
   <a href={href}>
-    {logoSrc && <div class="logo-container"><img src={logoSrc} alt="Project Logo" style={{ maxWidth: logoWidth }} /></div>}
     <div class="content-container">
-      <h2>{title}</h2>
+      <h2>{title} {year ? `(${year})` : ""}</h2>
       <div class="language-container">
         <span class="dot" style={{ backgroundColor: languageColor }}></span>
         <span class="language">{language}</span>
       </div>
+      {
+        tags && tags.length > 0 && (
+          <div class="tags-container">
+            {tags.map((tag) => (
+              <span class="tag">{tag}</span>
+            ))}
+          </div>
+        )
+      }
       <p>{body}</p>
       <p>{contribution}</p>
     </div>
@@ -29,6 +46,21 @@ const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%',
 </li>
 
 <style>
+  .tags-container {
+    display: flex;
+    gap: 5px;
+  }
+
+  .tag {
+    background-color: #4d4e4e;
+    color: #ffffff;
+    padding: 2px 6px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 20px;
+    display: inline-block;
+  }
+
   .link-card {
     list-style: none;
     display: flex;
@@ -69,6 +101,7 @@ const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%',
   }
   h2 {
     margin: 0;
+    font-weight: bold;
     font-size: 1.25rem;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
-- 
cgit v1.2.3