From 3a47ecbb9632012f136dfb2e410b61baa686bfb1 Mon Sep 17 00:00:00 2001
From: Steve Paul <steveebenezer@protonmail.com>
Date: Fri, 22 Nov 2024 15:39:54 +0530
Subject: [PATCH] Add date meta to json and new tag to ui

---
 src/components/Card.jsx           | 14 +++++++++++++-
 src/components/CardsContainer.jsx |  3 ++-
 src/components/CategoryNav.css    | 13 +++++--------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 533052c..358d625 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,7 +1,18 @@
 import "./Card.css";
 
 export default function Card(props) {
-  const { href, title, body, tag } = props;
+  const { href, title, body, tag, dateAdded } = props;
+
+  const isNew = () => {
+    if (!dateAdded) return false;
+    
+    const addedDate = new Date(dateAdded);
+    const today = new Date();
+    const differenceInTime = today.getTime() - addedDate.getTime();
+    const differenceInDays = differenceInTime / (1000 * 3600 * 24);
+    
+    return differenceInDays <= 30;
+  };
 
   return (
     <li className="link-card">
@@ -9,6 +20,7 @@ export default function Card(props) {
         <strong className="nu-c-h6 nu-u-mt-1 nu-u-mb-1">{title}</strong>
         <p className="nu-c-fs-small nu-u-mt-1 nu-u-mb-1">{body}</p>
         <p className="distribution">
+          {isNew() && <span className="tag nu-u-me-2">New</span>}
           <span className="tag">{tag}</span>
         </p>
       </a>
diff --git a/src/components/CardsContainer.jsx b/src/components/CardsContainer.jsx
index 3afbb76..814dff1 100644
--- a/src/components/CardsContainer.jsx
+++ b/src/components/CardsContainer.jsx
@@ -14,13 +14,14 @@ export default function CardsContainer({ filter }) {
   return (
     <section>
       <ul role="list" className="link-card-grid">
-        {filteredCards.map(({ url, title, body, tag }, i) => (
+        {filteredCards.map(({ url, title, body, tag, "date-added": dateAdded }, i) => (
           <Card
             key={`${title}-${i}`}
             href={url}
             title={title}
             body={body}
             tag={tag}
+            dateAdded={dateAdded}
           />
         ))}
       </ul>
diff --git a/src/components/CategoryNav.css b/src/components/CategoryNav.css
index 4f0b960..9f05413 100644
--- a/src/components/CategoryNav.css
+++ b/src/components/CategoryNav.css
@@ -3,6 +3,8 @@
 	box-shadow: inset 0px -1px 0px var(--border-muted);
 	white-space: nowrap;
 	overflow-x: scroll;
+	/* scrollbar-width: none;  /* Firefox */
+  /* -ms-overflow-style: none;  /* Internet Explorer and Edge */
 	position: sticky;
 	top: 0;
 	background-color: var(--background);
@@ -13,12 +15,7 @@
 	z-index: 999999;
 }
 
-/* hide scrollbar
-.category-nav {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.category-nav::-webkit-scrollbar{
+/* Hide scrollbar for Chrome, Safari and Opera */
+/* .category-nav::-webkit-scrollbar {
   display: none;
-}
-*/
+} */