41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface GameCardProps {
|
|
id: string
|
|
title: string
|
|
image: string
|
|
provider?: string
|
|
}
|
|
|
|
export function GameCard({ id, title, image, provider }: GameCardProps) {
|
|
return (
|
|
<div className="group cursor-pointer shrink-0 w-[160px] md:w-[180px]">
|
|
<div className="relative aspect-[4/3] rounded-md overflow-hidden bg-brand-surface border border-white/5 transition-transform duration-300 group-hover:scale-[1.02] group-hover:border-brand-primary/50">
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2">
|
|
<button className="bg-brand-primary text-black text-[10px] font-black py-1 px-3 rounded uppercase self-center hover:bg-brand-primary-hover transition-colors">
|
|
Play Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-center">
|
|
<h3 className="text-[11px] font-bold text-white/90 truncate group-hover:text-brand-primary transition-colors">
|
|
{title}
|
|
</h3>
|
|
{provider && (
|
|
<p className="text-[9px] text-white/40 uppercase font-medium mt-0.5">{provider}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|