radius

src/app/games/page.tsx

@@ -0,0 +1,43 @@
+'use client'
+import { useState, useEffect } from 'react'
+import Game from '@/components/game'
+
+interface GameData {
+  title: string
+  image: string
+  url: string
+}
+
+export default function Games() {
+  const [games, setGames] = useState<GameData[]>([])
+
+  useEffect(() => {
+    async function fetchGames() {
+      try {
+        const response = await fetch('/games.json')
+        if (!response.ok) {
+          throw new Error('Failed to fetch data')
+        }
+        const data: GameData[] = await response.json()
+        setGames(data)
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    }
+
+    fetchGames()
+  }, [])
+
+  return (
+    <div>
+      <h1 className="text-6xl font-semibold py-8 text-center">Games</h1>
+      <div className="flex flex-wrap justify-center px-24">
+        {games.map((game, index) => (
+          <div className="p-2" key={index}>
+            <Game title={game.title} image={game.image} url={game.url} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}