64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import Link from 'next/link'
|
|
import type { Product } from '@homaroma/types'
|
|
import { getCategoryImage, formatPrice } from '@homaroma/types'
|
|
|
|
interface ProductCardProps {
|
|
product: Product
|
|
}
|
|
|
|
export default function ProductCard({ product }: ProductCardProps) {
|
|
return (
|
|
<div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
|
|
<div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
|
|
<img
|
|
src={product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(product.category.name)}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
|
alt={product.scent.name}
|
|
/>
|
|
{/* Category badge */}
|
|
<div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
|
|
{product.category.name}
|
|
</div>
|
|
{/* Available badge */}
|
|
<div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
|
|
Available
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
|
|
<div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
|
|
<div>
|
|
<h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
|
|
{product.scent.name}
|
|
</h3>
|
|
<p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
|
|
{product.category.name}
|
|
</p>
|
|
</div>
|
|
<span className="text-cyan-glow font-bold text-xs md:text-lg">
|
|
{formatPrice(product.variants[0]?.price)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Variants (sizes) */}
|
|
<div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
|
|
{product.variants.map((v) => (
|
|
<div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
|
|
{v.size}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<Link
|
|
href={`/products/${product.id}`}
|
|
className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
|
|
>
|
|
Discover
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|