1 files changed, 51 insertions, 0 deletions

diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
new file mode 100644
index 0000000..e4b33e5
--- /dev/null
+++ b/frontend/src/pages/Games.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import GameEntry from '../components/GameEntry';
+import { Game } from '../types/Game';
+import { API } from '../api/Api';
+import "../css/Maps.css"
+
+const Games: React.FC = () => {
+    const [games, setGames] = React.useState<Game[]>([]);
+
+    const _fetch_games = async () => {
+      const games = await API.get_games();
+      setGames(games);
+    };
+
+    const _page_load = () => {
+      const loaders = document.querySelectorAll(".loader");
+      loaders.forEach((loader) => {
+          (loader as HTMLElement).style.display = "none";
+      });
+  }
+
+    React.useEffect(() => {
+        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
+            game.innerHTML = "";
+        });
+
+        _fetch_games();
+        _page_load();
+    }, []);
+
+    return (
+        <div className='games-page'>
+            <section className='games-page-header'>
+                <span><b>Games list</b></span>
+            </section>
+
+            <section>
+                <div className='games-page-content'>
+                    <div className='games-page-item-content'>
+                        {games.map((game, index) => (
+                            <GameEntry game={game} key={index} />
+                        ))}
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default Games;