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/spa/src/components/ProductCard.tsx
+43 -11
View File
@@ -46,6 +46,11 @@ export default function ProductCard({ product, enableQuickShop = false, category
const [selectedVariant, _setSelectedVariant] = useState(product.variants?.[0] || null);
const displayName = resolveStr(product.name, i18n.language) || (product.brand ? product.brand.name : '');
const displayCategoryName = categoryNameOverride || resolveStr(product.category.name, i18n.language);
const fallbackImage = getCategoryImage(displayCategoryName);
const images = (product.images?.length ?? 0) > 0
? product.images!.slice(0, 3).map(img => img.url)
: [fallbackImage];
const hasMultipleImages = images.length > 1;
const handleWishlistClick = (e: React.MouseEvent) => {
e.preventDefault();
@@ -66,27 +71,54 @@ export default function ProductCard({ product, enableQuickShop = false, category
onClick={handleCardClick}
className="ui-shell-card ui-shell-card-hover group flex cursor-pointer flex-col overflow-hidden p-2"
>
<div className="relative aspect-square overflow-hidden rounded-xl bg-pop-black/5">
<img
src={product.images?.[0]?.url || getCategoryImage(displayCategoryName)}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
alt={displayName}
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
<div className="ui-chip absolute left-3 top-3 border-pop-bg bg-pop-bg/90 px-2.5 py-1 text-[10px] text-pop-black shadow-sm backdrop-blur-sm">
<div className="relative aspect-square overflow-hidden rounded-xl bg-pop-black/5 group/image">
<div className="ui-chip absolute left-3 top-3 z-20 border-pop-bg bg-pop-bg/90 px-2.5 py-1 text-[10px] text-pop-black shadow-sm backdrop-blur-sm pointer-events-none">
{displayCategoryName}
</div>
<button
type="button"
onClick={handleWishlistClick}
className="absolute right-3 top-3 z-10 rounded-full bg-pop-bg/90 p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
className="absolute right-3 top-3 z-20 rounded-full bg-pop-bg/90 p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
>
<Heart
className={`w-4 h-4 transition-colors ${isWished ? 'fill-pop-pink text-pop-pink' : 'text-pop-black/40 hover:text-pop-pink'}`}
/>
</button>
{hasMultipleImages ? (
<>
{/* Desktop Hover Effect */}
<div className="hidden md:block absolute inset-0 w-full h-full">
<img src={images[0]} alt={displayName} className="absolute inset-0 w-full h-full object-cover group-hover/image:opacity-0 transition-opacity duration-700" />
<img src={images[1]} alt={displayName} className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover/image:opacity-100 group-hover/image:scale-105 transition-all duration-700" />
</div>
{/* Mobile Native Slider */}
<div className="md:hidden relative w-full h-full" onClick={(e) => e.stopPropagation()}>
<div className="flex w-full h-full overflow-x-auto snap-x snap-mandatory hide-scrollbar">
{images.map((img, idx) => (
<div key={idx} className="relative w-full h-full flex-none snap-center block" onClick={handleCardClick}>
<img src={img} alt={`${displayName} ${idx + 1}`} className="absolute inset-0 w-full h-full object-cover" />
</div>
))}
</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>
</>
) : (
<img
src={images[0]}
className="w-full h-full object-cover group-hover/image:scale-105 transition-transform duration-700"
alt={displayName}
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
)}
</div>
<div className="flex flex-1 flex-col p-4">