Check is location is fresh/updated

package.json

@@ -16,6 +16,7 @@
     "lint": "eslint --ignore-path .gitignore ."
   },
   "dependencies": {
+    "dayjs": "^1.10.7",
     "focus-visible": "^5.2.0",
     "sanitize.css": "^12.0.1"
   },

pnpm-lock.yaml

@@ -6,6 +6,7 @@ specifiers:
   '@sveltejs/kit': next
   '@typescript-eslint/eslint-plugin': ^4.32.0
   '@typescript-eslint/parser': ^4.32.0
+  dayjs: ^1.10.7
   eslint: ^7.32.0
   eslint-plugin-svelte3: ^3.2.1
   focus-visible: ^5.2.0
@@ -19,6 +20,7 @@ specifiers:
   typescript: ^4.4.3
 
 dependencies:
+  dayjs: 1.10.7
   focus-visible: 5.2.0
   motion: 10.1.0
   sanitize.css: 12.0.1
@@ -494,6 +496,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /dayjs/1.10.7:
+    resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
+    dev: false
+
   /debug/4.3.2:
     resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==}
     engines: {node: '>=6.0'}

src/components/molecules/Location.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+    import { getContext } from 'svelte'
+    import dayjs from 'dayjs'
     // Components
     import Image from '$components/atoms/Image.svelte'
 
     export let location: any
 
-    const { name, slug, country, last_updated } = location
+    const { settings: { limit_new }}: any = getContext('global')
+
+    const { name, slug, country, date_updated } = location
+    const dateNowOffset = dayjs().subtract(limit_new, 'day')
+    const dateLocationUpdated = dayjs(date_updated)
+    const isNew = dateLocationUpdated.isAfter(dateNowOffset)
 </script>
 
 <div class="location" role="listitem">
@@ -14,5 +21,8 @@
             {name}
         </h3>
         <span class="text-label">{country.name}</span>
+        {#if isNew}
+            <!-- show the badge -->
+        {/if}
     </a>
 </div>

src/routes/__layout.svelte

@@ -55,6 +55,7 @@
                     seo_name
                     seo_title
                     seo_description
+                    limit_new
                     instagram
                     footer_links
                 }

src/routes/index.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import Button from '$components/atoms/Button.svelte'
-    import Locations from '$components/organisms/Locations.svelte'
     import Metas from '$components/Metas.svelte'
+    import Button from '$components/atoms/Button.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
 
     export let photos: any