62 lines
2 KiB
TypeScript
62 lines
2 KiB
TypeScript
import Image from "next/image"
|
|
import { AnimatedNumber } from "@/components/animated-number"
|
|
import { PublicInset, PublicSurface } from "@/components/public-surface"
|
|
|
|
interface VendingMachineCardProps {
|
|
name: string
|
|
description: string
|
|
image: string
|
|
alt: string
|
|
selections?: number
|
|
items?: number
|
|
}
|
|
|
|
export function VendingMachineCard({
|
|
name,
|
|
description,
|
|
image,
|
|
alt,
|
|
selections = 0,
|
|
items = 0,
|
|
}: VendingMachineCardProps) {
|
|
return (
|
|
<PublicSurface className="flex h-full flex-col overflow-hidden p-0 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)]">
|
|
<div className="relative aspect-[4/3] w-full bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
fill
|
|
className="object-contain p-5"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
priority={false}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-1 flex-col p-5 md:p-6">
|
|
<h3 className="text-xl font-semibold mb-2">{name}</h3>
|
|
<p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<PublicInset>
|
|
<AnimatedNumber
|
|
value={selections}
|
|
className="text-2xl font-bold text-foreground"
|
|
/>
|
|
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
|
Selections
|
|
</div>
|
|
</PublicInset>
|
|
<PublicInset>
|
|
<AnimatedNumber
|
|
value={items}
|
|
className="text-2xl font-bold text-foreground"
|
|
/>
|
|
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
|
Items
|
|
</div>
|
|
</PublicInset>
|
|
</div>
|
|
</div>
|
|
</PublicSurface>
|
|
)
|
|
}
|