@pradip1995/segment-product-card 0.3.25 → 0.3.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pradip1995/segment-product-card",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.27",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@pradip1995/segment-login-popup": "^0.1.3",
|
|
29
|
-
"@pradip1995/segment-primitives": "^0.4.
|
|
30
|
-
"@pradip1995/segment-tokens": "^0.3.
|
|
29
|
+
"@pradip1995/segment-primitives": "^0.4.11",
|
|
30
|
+
"@pradip1995/segment-tokens": "^0.3.14"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@medusajs/types": "^2.0.0",
|
|
@@ -39,34 +39,38 @@ export default function MotionProductCard({
|
|
|
39
39
|
className="product-card group/card flex flex-col w-full h-full relative font-sans"
|
|
40
40
|
>
|
|
41
41
|
<LocalizedLink href={`/products/${product.handle}`} className="flex flex-col h-full relative">
|
|
42
|
-
<div className="product-card__media relative aspect-[3/4] bg-[#
|
|
42
|
+
<div className="product-card__media relative aspect-[3/4] w-full bg-[#ececec] overflow-hidden group/media">
|
|
43
43
|
{product.thumbnail?.trim() ? (
|
|
44
44
|
<>
|
|
45
45
|
<Image
|
|
46
46
|
src={product.thumbnail.trim()}
|
|
47
47
|
alt={product.title || ""}
|
|
48
48
|
fill
|
|
49
|
-
sizes="(max-width: 640px)
|
|
49
|
+
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 50vw, 50vw"
|
|
50
50
|
className={`object-cover transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)] ${
|
|
51
51
|
product.images && product.images.length > 1
|
|
52
52
|
? "group-hover/media:opacity-0"
|
|
53
53
|
: "group-hover/media:scale-105"
|
|
54
54
|
}`}
|
|
55
55
|
loading="lazy"
|
|
56
|
+
unoptimized
|
|
56
57
|
/>
|
|
57
58
|
{product.images && product.images.length > 1 ? (
|
|
58
59
|
<Image
|
|
59
60
|
src={product.images[1].url.trim()}
|
|
60
61
|
alt={product.title || ""}
|
|
61
62
|
fill
|
|
62
|
-
sizes="(max-width: 640px)
|
|
63
|
+
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 50vw, 50vw"
|
|
63
64
|
className="absolute inset-0 object-cover opacity-0 scale-100 group-hover/media:opacity-100 group-hover/media:scale-105 transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
|
|
64
65
|
loading="lazy"
|
|
66
|
+
unoptimized
|
|
65
67
|
/>
|
|
66
68
|
) : null}
|
|
67
69
|
</>
|
|
68
70
|
) : (
|
|
69
|
-
<div className="
|
|
71
|
+
<div className="absolute inset-0 flex items-center justify-center bg-[#e8e8e8] text-[10px] uppercase tracking-widest text-gray-400">
|
|
72
|
+
No image
|
|
73
|
+
</div>
|
|
70
74
|
)}
|
|
71
75
|
|
|
72
76
|
<div className="absolute top-3 right-3 z-10 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
|
|
@@ -78,19 +82,19 @@ export default function MotionProductCard({
|
|
|
78
82
|
</div>
|
|
79
83
|
</div>
|
|
80
84
|
|
|
81
|
-
<div className="mt-4 flex flex-col min-w-0">
|
|
82
|
-
<h3 className="text-sm font-medium text-gray-900 group-hover/card:underline transition-all">
|
|
85
|
+
<div className="mt-3 sm:mt-4 flex flex-col min-w-0 items-center text-center md:items-start md:text-left">
|
|
86
|
+
<h3 className="text-xs sm:text-sm font-medium text-gray-900 group-hover/card:underline transition-all">
|
|
83
87
|
{product.title}
|
|
84
88
|
</h3>
|
|
85
89
|
|
|
86
90
|
{price != null ? (
|
|
87
|
-
<div className="mt-1 text-sm text-gray-600">
|
|
91
|
+
<div className="mt-1 text-xs sm:text-sm text-gray-600">
|
|
88
92
|
<span>{formatPrice(price, currency)}</span>
|
|
89
93
|
</div>
|
|
90
94
|
) : null}
|
|
91
95
|
|
|
92
96
|
{colors.length > 0 ? (
|
|
93
|
-
<div className="mt-2 flex items-center gap-1.5" aria-label="Available colors">
|
|
97
|
+
<div className="mt-2 flex items-center justify-center md:justify-start gap-1.5" aria-label="Available colors">
|
|
94
98
|
{colors.map((color) => {
|
|
95
99
|
const swatch = color.swatch
|
|
96
100
|
const light = isLightSwatch(swatch)
|
|
@@ -60,7 +60,7 @@ export default function ShopProductCard({
|
|
|
60
60
|
return (
|
|
61
61
|
<article
|
|
62
62
|
data-product-card-id={product.id}
|
|
63
|
-
className="product-card group/card flex flex-col w-full h-full relative font-sans"
|
|
63
|
+
className="product-card shop-product-card group/card flex flex-col w-full h-full relative font-sans"
|
|
64
64
|
>
|
|
65
65
|
<LocalizedLink href={`/products/${product.handle}`} className="flex flex-col h-full relative group/link">
|
|
66
66
|
<div className="product-card__media relative aspect-[3/4] bg-[#F4F4F4] overflow-hidden group/media rounded-none">
|
|
@@ -114,7 +114,7 @@ export default function ShopProductCard({
|
|
|
114
114
|
)}
|
|
115
115
|
|
|
116
116
|
{/* Floating Royal Blue "Quick View" Circle Button (on image hover) */}
|
|
117
|
-
<div className="absolute top-3.5 right-3.5 z-20 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
|
|
117
|
+
<div className="product-card__quick-view absolute top-3.5 right-3.5 z-20 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
|
|
118
118
|
<div
|
|
119
119
|
className="w-[54px] h-[54px] rounded-full bg-[#2563EB] text-[#FFFFFF] flex items-center justify-center text-[11px] font-medium tracking-normal text-center leading-[1.15] shadow-lg pointer-events-auto cursor-pointer hover:bg-[#1d4ed8] hover:scale-105 transition-transform"
|
|
120
120
|
onClick={(e) => {
|
|
@@ -142,7 +142,7 @@ export default function ShopProductCard({
|
|
|
142
142
|
) : null}
|
|
143
143
|
</div>
|
|
144
144
|
|
|
145
|
-
<div className="mt-3 flex flex-col min-w-0">
|
|
145
|
+
<div className="mt-3 flex flex-col min-w-0 items-center text-center md:items-start md:text-left">
|
|
146
146
|
<h3 className="text-[15px] font-normal text-[#111111] group-hover/link:underline transition-all line-clamp-1 leading-snug">
|
|
147
147
|
{product.title}
|
|
148
148
|
</h3>
|
|
@@ -155,7 +155,7 @@ export default function ShopProductCard({
|
|
|
155
155
|
|
|
156
156
|
{/* Dynamic Color Swatches below price */}
|
|
157
157
|
{colors.length > 0 && (
|
|
158
|
-
<div className="mt-2.5 flex items-center gap-1.5">
|
|
158
|
+
<div className="mt-2.5 flex items-center justify-center md:justify-start gap-1.5">
|
|
159
159
|
{colors.map((color) => {
|
|
160
160
|
const isSelected = selectedColor === color.name
|
|
161
161
|
const swatch = color.swatch
|