src/constants.ts

@@ -14,26 +14,11 @@ export const LANDING_PAGE_DATA = {
     'naddr1qvzqqqrkcgpzquuz5nxzzap2c034s8cuv5ayr7gjaxz7d22pgwfh0qpmsesy9eflqp4nxvp5xqer5den8qexzdrrvverzde5xfskxvm9xv6nsvtxx93nvdfnvy6rze3exyex2wfcx4jnvcfexscngveexvmnwwpsxd3rsd3kxq6ryef4xdnr5vrrvgmnjc33xuknwde4vskngvekxgknsenyxvkk2ctxvscrvenpvsmnxeqydygjx'
   ],
   featuredGames: [
-    {
-      title: 'SUPERHOT',
-      imageUrl: ''
-    },
-    {
-      title: 'The Bounce House',
-      imageUrl: ''
-    },
-    {
-      title: 'Immortal Guns',
-      imageUrl: ''
-    },
-    {
-      title: 'Magenta Horizon Act 1',
-      imageUrl: ''
-    },
-    {
-      title: 'DEAD LETTER DEPT. Demo',
-      imageUrl: ''
-    }
+    'SUPERHOT',
+    'The Bounce House',
+    'Immortal Guns',
+    'Magenta Horizon Act 1',
+    'DEAD LETTER DEPT. Demo'
   ]
 }
 // we use this object to check if a user has reacted positively or negatively to a post

src/pages/home.tsx

@@ -1,5 +1,5 @@
 import { Filter, kinds, nip19 } from 'nostr-tools'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { A11y, Navigation, Pagination, Autoplay } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -8,7 +8,7 @@ import { GameCard } from '../components/GameCard'
 import { ModCard } from '../components/ModCard'
 import { LANDING_PAGE_DATA } from '../constants'
 import { RelayController } from '../controllers'
-import { useDidMount } from '../hooks'
+import { useDidMount, useGames } from '../hooks'
 import { appRoutes, getModPageRoute } from '../routes'
 import { ModDetails } from '../types'
 import {
@@ -30,6 +30,14 @@ import 'swiper/css/pagination'
 
 export const HomePage = () => {
   const navigate = useNavigate()
+  const games = useGames()
+
+  const featuredGames = useMemo(() => {
+    return games.filter((game) =>
+      LANDING_PAGE_DATA.featuredGames.includes(game['Game Name'])
+    )
+  }, [games])
+
   return (
     <div className='InnerBodyMain'>
       <div className='SliderWrapper'>
@@ -67,11 +75,11 @@ export const HomePage = () => {
               <h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
             </div>
             <div className='IBMSMList IBMSMListFeaturedAlt'>
-              {LANDING_PAGE_DATA.featuredGames.map((game) => (
+              {featuredGames.map((game) => (
                 <GameCard
-                  key={game.title}
-                  title={game.title}
-                  imageUrl={game.imageUrl}
+                  key={game['Game Name']}
+                  title={game['Game Name']}
+                  imageUrl={game['Boxart image']}
                 />
               ))}
             </div>