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-06-21 07:04:03 -04:00
1 parent f7ac94ca0d
commit 335f3b4f59
41 files changed
+809 -413
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/ProductCard.tsx
+10 -10
View File
@@ -48,7 +48,7 @@ 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 h-48 overflow-hidden rounded-xl bg-spa-sage/20 md:h-64">
<div className="relative h-48 overflow-hidden rounded-xl bg-pop-black/5 md:h-64">
<img
src={product.images?.[0]?.url || getCategoryImage(displayCategoryName)}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
@@ -57,26 +57,26 @@ export default function ProductCard({ product, enableQuickShop = false, category
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
<div className="ui-chip absolute left-3 top-3 border-spa-light bg-spa-light px-2.5 py-1 text-[10px] text-spa-forest shadow-sm backdrop-blur-sm">
<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">
{displayCategoryName}
</div>
<button
type="button"
onClick={handleWishlistClick}
className="absolute right-3 top-3 z-10 rounded-full bg-spa-light p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
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"
>
<Heart
className={`w-4 h-4 transition-colors ${isWished ? 'fill-rose-500 text-rose-500' : 'text-spa-stone/60 hover:text-rose-500'}`}
className={`w-4 h-4 transition-colors ${isWished ? 'fill-pop-pink text-pop-pink' : 'text-pop-black/40 hover:text-pop-pink'}`}
/>
</button>
</div>
<div className="flex flex-1 flex-col p-4">
<div className="mb-2">
<h3 className="line-clamp-1 text-base font-bold leading-tight text-pop-black transition-colors group-hover:text-spa-forest md:text-lg">
<h3 className="line-clamp-1 text-base font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink md:text-lg">
{displayName}
</h3>
<p className="mt-1 line-clamp-1 text-[10px] font-semibold uppercase tracking-widest text-spa-stone/60 md:text-xs">
<p className="mt-1 line-clamp-1 text-[10px] font-semibold uppercase tracking-widest text-pop-black/50 md:text-xs">
{displayCategoryName}
</p>
</div>
@@ -96,8 +96,8 @@ export default function ProductCard({ product, enableQuickShop = false, category
}}
className={`rounded-full border px-3 py-1 text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer ${
isSelected
? 'border-spa-forest bg-spa-forest text-spa-light shadow-sm'
: 'border-spa-stone/10 bg-spa-light text-spa-stone hover:border-spa-forest/30'
? 'border-pop-black bg-pop-black text-pop-bg shadow-sm'
: 'border-pop-black/10 bg-transparent text-pop-black/70 hover:border-pop-black/30 hover:bg-pop-black/5'
}`}
>
{variant.size}
@@ -109,11 +109,11 @@ export default function ProductCard({ product, enableQuickShop = false, category
<div className="mt-auto flex flex-col gap-2 pt-3">
<div className="flex items-center justify-between">
<span className="text-sm font-black text-rose-500 md:text-lg">
<span className="text-sm font-black text-pop-pink md:text-lg">
{formatPrice(selectedVariant?.price ?? product.variants[0]?.price)}
</span>
{!enableQuickShop && (
<span className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-spa-forest transition-transform group-hover:translate-x-1 md:text-xs">
<span className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-pop-black transition-transform group-hover:translate-x-1 group-hover:text-pop-pink md:text-xs">
{t('product.viewDetails')}
</span>
)}