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-10-06 18:16:25 +07:00
1 parent 08045eabff
commit ce4502d123
2 files changed
+9 -47
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/ProductCard.tsx
+5 -24
View File
@@ -150,34 +150,15 @@ export default function ProductCard({ product, enableQuickShop = false, category
{colorSwatches.length > 0 || (enableQuickShop && product.variants && product.variants.length > 1) ? ( {colorSwatches.length > 0 || (enableQuickShop && product.variants && product.variants.length > 1) ? (
colorSwatches.length > 0 ? ( colorSwatches.length > 0 ? (
<div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap" onClick={(e) => e.stopPropagation()}> <div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap">
{colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => { {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => (
const isSelected = selectedVariant?.id === variant.id || selectedVariant?.colorCode === colorCode; <span
return (
<button
key={variant.id || colorCode} key={variant.id || colorCode}
type="button" className="relative h-3.5 w-3.5 rounded-full border border-black/15 shadow-sm shrink-0"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setSelectedVariant(variant);
}}
onMouseEnter={() => {
if (variant.imageUrl) {
setSelectedVariant(variant);
}
}}
className={`relative h-4 w-4 rounded-full border border-black/15 transition-all duration-200 hover:scale-125 focus:outline-none ${
isSelected
? 'ring-2 ring-pop-black ring-offset-2 scale-110 shadow-sm'
: 'opacity-85 hover:opacity-100'
}`}
style={{ backgroundColor: colorCode }} style={{ backgroundColor: colorCode }}
title={label || colorCode} title={label || colorCode}
aria-label={label || `Color ${colorCode}`}
/> />
); ))}
})}
{colorSwatches.length > 5 && ( {colorSwatches.length > 5 && (
<span className="text-[10px] font-semibold text-pop-black/60 pl-0.5"> <span className="text-[10px] font-semibold text-pop-black/60 pl-0.5">
+{colorSwatches.length - 5} +{colorSwatches.length - 5}
apps/website/src/components/ProductCard.tsx
+4 -23
View File
@@ -145,33 +145,14 @@ export default function ProductCard({ product }: ProductCardProps) {
{colorSwatches.length > 0 || (product.variants && product.variants.length > 1) ? ( {colorSwatches.length > 0 || (product.variants && product.variants.length > 1) ? (
colorSwatches.length > 0 ? ( colorSwatches.length > 0 ? (
<div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap"> <div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap">
{colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => { {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => (
const isSelected = selectedVariant?.id === variant.id || selectedVariant?.colorCode === colorCode <span
return (
<button
key={variant.id || colorCode} key={variant.id || colorCode}
type="button" className="relative h-3.5 w-3.5 rounded-full border border-black/15 dark:border-white/20 shadow-sm shrink-0"
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
setSelectedVariant(variant)
}}
onMouseEnter={() => {
if (variant.imageUrl) {
setSelectedVariant(variant)
}
}}
className={`relative h-4 w-4 rounded-full border border-black/15 dark:border-white/20 transition-all duration-200 hover:scale-125 focus:outline-none ${
isSelected
? 'ring-2 ring-text-main ring-offset-2 ring-offset-surface-card scale-110 shadow-sm'
: 'opacity-85 hover:opacity-100'
}`}
style={{ backgroundColor: colorCode }} style={{ backgroundColor: colorCode }}
title={label || colorCode} title={label || colorCode}
aria-label={label || `Color ${colorCode}`}
/> />
) ))}
})}
{colorSwatches.length > 5 && ( {colorSwatches.length > 5 && (
<span className="text-[10px] font-semibold text-muted-text pl-0.5"> <span className="text-[10px] font-semibold text-muted-text pl-0.5">
+{colorSwatches.length - 5} +{colorSwatches.length - 5}