Nebelung
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|