41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import Image from "next/image";
|
|
import { Game } from "../types/Game";
|
|
|
|
interface GameSelectionProps {
|
|
games: Game[];
|
|
selectedGame: Game | null;
|
|
onSelect: (game: Game) => void;
|
|
}
|
|
|
|
export function GameSelection({ games, selectedGame, onSelect }: GameSelectionProps) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
{games.map((game) => (
|
|
<div
|
|
key={game.id}
|
|
className={`p-4 cursor-pointer rounded-xl border-2 transition-transform duration-300
|
|
${selectedGame?.id === game.id
|
|
? "scale-110 border-gray-400 bg-gray-800"
|
|
: game.isAvailable
|
|
? "border-gray-600 bg-[rgb(10,10,10)] hover:scale-105 hover:border-gray-400"
|
|
: "border-gray-800 bg-[rgb(5,5,5)] opacity-50 cursor-not-allowed"
|
|
}`}
|
|
onClick={() => game.isAvailable && onSelect(game)}
|
|
>
|
|
<Image
|
|
src={game.thumbnail}
|
|
alt={game.name}
|
|
width={100}
|
|
height={100}
|
|
className="mb-2 rounded-md"
|
|
/>
|
|
<h3 className="text-center text-sm">{game.name}</h3>
|
|
{!game.isAvailable && (
|
|
<p className="text-center text-xs text-gray-500 mt-1">Coming Soon</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|