Feat: recently launched section

src/components/Categories/Categories.tsx

@@ -1,4 +1,5 @@
 import { categories, reputation } from "../../data/categories"
+import checkIfDateDifferenceIsLessThanValue from "../../helpers/checkIfDateDifferenceIsLessThanValue"
 import { useCategoryStore } from "../../hooks/useCategoryStore"
 import { useDarkMode } from "../../hooks/useDarkMode"
 import Image from "next/image"
@@ -53,6 +54,15 @@ const Categories = ({ className, dappCards }: CategoriesProps) => {
           return prevValue + 1
         }
       }
+      if (category === "Recently launched") {
+        if (currentValue.date_added) {
+          const dateAdded = new Date(currentValue.date_added)
+          const dateNow = new Date()
+          if (checkIfDateDifferenceIsLessThanValue(dateNow, dateAdded)) {
+            return prevValue + 1
+          }
+        }
+      }
       if (currentValue.tags.indexOf(category) !== -1) {
         return prevValue + 1
       }

src/data/categories.tsx

@@ -18,6 +18,8 @@ import heart from "../assets/icons/heart.svg"
 import heartLight from "../assets/icons/heartLight.svg"
 import legal from "../assets/icons/legal.svg"
 import legalLight from "../assets/icons/legalLight.svg"
+import recent from "../assets/icons/new.svg"
+import recentLight from "../assets/icons/newLight.svg"
 import profile from "../assets/icons/profile.svg"
 import profileLight from "../assets/icons/profileLight.svg"
 import swap from "../assets/icons/swap.svg"
@@ -42,6 +44,12 @@ export const categories = [
 export const reputation = [
   { key: "doxxed", name: "Public team", icon: profile, iconDark: profileLight },
   { key: "audited", name: "Audited", icon: legal, iconDark: legalLight },
+  {
+    key: "recent",
+    name: "Recently launched",
+    icon: recent,
+    iconDark: recentLight,
+  },
 ]
 
 export const allCategories = [...categories, ...reputation]

src/helpers/checkIfDateDifferenceIsLessThanValue.tsx

@@ -0,0 +1,8 @@
+export default function checkIfDateDifferenceIsLessThanValue(
+  day1: Date,
+  day2: Date,
+  age = 28,
+) {
+  const daysBetween = (day1.getTime() - day2.getTime()) / (1000 * 60 * 60 * 24)
+  return daysBetween < age
+}

src/pages/category/[category].tsx

@@ -7,6 +7,7 @@ import {
   changeTagsToCategoriesSlug,
   reputation,
 } from "../../data/categories"
+import checkIfDateDifferenceIsLessThanValue from "../../helpers/checkIfDateDifferenceIsLessThanValue"
 import { getAllDapps } from "../../hooks/getAllDapps"
 import { useCategoryStore } from "../../hooks/useCategoryStore"
 import { GetStaticPaths, GetStaticProps } from "next"
@@ -47,6 +48,13 @@ const CategoryPage = ({
     if (category === "audited") {
       return dapp.audits && dapp.audits.length > 0
     }
+    if (category === "recent") {
+      const dateAdded = new Date(dapp.date_added)
+      const dateNow = new Date()
+      return (
+        dateAdded && checkIfDateDifferenceIsLessThanValue(dateNow, dateAdded)
+      )
+    }
     return dapp.categories.includes(category)
   })
   return (
@@ -92,6 +100,7 @@ export const getStaticProps: GetStaticProps<{ dappCards: DappCard[] }> = async (
     featured: dapp.dotw,
     annonymous: dapp.teamInfo.anonymous,
     audits: dapp.audits,
+    date_added: dapp.date_added || null,
   }))
 
   return {

src/pages/index.tsx

@@ -69,6 +69,7 @@ export const getStaticProps = async () => {
     featured: dapp.dotw,
     annonymous: dapp.teamInfo.anonymous,
     audits: dapp.audits,
+    date_added: dapp.date_added || null,
   }))
 
   return {

src/typings.d.ts

@@ -33,6 +33,7 @@ interface DappInfo {
   media: Media
   dotw: boolean
   twitterName: string
+  date_added?: string
   nft?: {
     collectionLink: string
     collectionContract: string
@@ -123,4 +124,5 @@ interface DappCard {
   featured: boolean
   annonymous: boolean
   audits: Audit[]
+  date_added: string
 }