Add date meta to json and new tag to ui

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>

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>

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
+/* Hide scrollbar for Chrome, Safari and Opera */
-.category-nav {
+/* .category-nav::-webkit-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.category-nav::-webkit-scrollbar{
   display: none;
-}
+} */
-*/