admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-07-12 02:32:02 -04:00
1 parent 87f4dac21f
commit 7b29a6f98e
2 files changed
+91 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/ProductCard.tsx
+48 -15
View File
@@ -25,6 +25,10 @@ export default function ProductCard({ product }: ProductCardProps) {
const productName = resolveLocalized(product.name, lang) || product.brand.name
const productSlug = generateProductSlug(productName, product.id)
const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
const images = (product.images?.length ?? 0) > 0
? product.images!.slice(0, 3).map(img => img.url)
: [imageUrl];
const hasMultipleImages = images.length > 1;
const displayPrice = selectedVariant?.price ?? product.variants[0]?.price ?? 0
const addToCartLabels: Record<string, string> = {
@@ -59,21 +63,50 @@ export default function ProductCard({ product }: ProductCardProps) {
return (
<div className="ui-card ui-card-hover group flex h-full cursor-pointer flex-col overflow-hidden p-2">
<div className="relative aspect-square overflow-hidden rounded-xl bg-surface-page">
<WishlistButton product={product} />
<Link href={`/products/${productSlug}`} className="block h-full w-full">
<Image
src={imageUrl}
alt={productName}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
{categoryName && (
<span className="ui-chip absolute left-3 top-3 border-line-primary/20 bg-surface-card/90 px-2.5 py-1 text-[10px] text-text-main shadow-sm backdrop-blur-sm">
{categoryName}
</span>
)}
</Link>
<div className="absolute right-2 top-2 z-20">
<WishlistButton product={product} />
</div>
{categoryName && (
<span className="ui-chip absolute left-3 top-3 z-20 border-line-primary/20 bg-surface-card/90 px-2.5 py-1 text-[10px] text-text-main shadow-sm backdrop-blur-sm pointer-events-none">
{categoryName}
</span>
)}
{hasMultipleImages ? (
<>
{/* Desktop Hover Effect */}
<Link href={`/products/${productSlug}`} className="hidden md:block absolute inset-0 w-full h-full">
<Image src={images[0]} alt={productName} fill unoptimized className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:opacity-0" />
<Image src={images[1]} alt={productName} fill unoptimized className="absolute inset-0 h-full w-full object-cover transition duration-700 opacity-0 group-hover:opacity-100 group-hover:scale-105" />
</Link>
{/* Mobile Native Slider */}
<div className="md:hidden relative w-full h-full">
<div className="flex w-full h-full overflow-x-auto snap-x snap-mandatory hide-scrollbar">
{images.map((img, idx) => (
<Link key={idx} href={`/products/${productSlug}`} className="relative w-full h-full flex-none snap-center block">
<Image src={img} alt={`${productName} ${idx + 1}`} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
</Link>
))}
</div>
<div className="absolute bottom-3 left-0 right-0 flex justify-center gap-1.5 z-10 pointer-events-none">
{images.map((_, idx) => (
<div key={idx} className="w-1.5 h-1.5 rounded-full bg-white/80 shadow-[0_1px_2px_rgba(0,0,0,0.3)]" />
))}
</div>
</div>
</>
) : (
<Link href={`/products/${productSlug}`} className="block h-full w-full">
<Image
src={images[0]}
alt={productName}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</Link>
)}
</div>
<div className="flex flex-1 flex-col p-4">