game-item.tsx

import { Card } from "@/components/ui/card"
import Image from "next/image"
import Link from "next/link"

// this is a single game helper-component, only for design purposes
export default function Game({ id, name, cover }: { id: number, name: string, cover: { url: string } }) {
    return (
        <Link href={`/games/${id}`} prefetch={false}>
            <Card className="aspect-[264/374] relative block group items-center justify-center overflow-hidden">
                <Image
                    src={cover.url}
                    alt={name}
                    fill
                    priority
                    className="object-cover rounded-lg" />
                <div className="absolute bottom-0 p-3 group-hover:bg-background w-full">
                    <div className="transition-all transform translate-y-6 opacity-0 group-hover:opacity-100 group-hover:translate-y-0">
                        <p className="truncate">{name}</p>
                    </div>
                </div>
            </Card>
        </Link>
    )
}