@codesinger0/shared-components 1.1.2 → 1.1.3
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.
|
@@ -12,6 +12,9 @@ const LargeItemCard = ({
|
|
|
12
12
|
reverse = false,
|
|
13
13
|
price,
|
|
14
14
|
discountPrice,
|
|
15
|
+
amountAvailable,
|
|
16
|
+
availableLabel = 'נותרו במלאי',
|
|
17
|
+
soldOutLabel = 'אזל במלאי',
|
|
15
18
|
icons = [],
|
|
16
19
|
classNames = {}
|
|
17
20
|
}) => {
|
|
@@ -26,7 +29,15 @@ const LargeItemCard = ({
|
|
|
26
29
|
return (
|
|
27
30
|
<section className="relative w-full overflow-visible py-16 px-4">
|
|
28
31
|
{/* Background Section with Text Content */}
|
|
29
|
-
<div className=
|
|
32
|
+
<div className="glass-card relative" style={{ minHeight: '48vh', overflow: 'visible' }}>
|
|
33
|
+
|
|
34
|
+
{/* Sold Out Badge */}
|
|
35
|
+
{amountAvailable !== undefined && amountAvailable <= 0 && (
|
|
36
|
+
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20 bg-red-500 text-white px-8 py-3 rounded-lg text-xl font-bold shadow-2xl">
|
|
37
|
+
{soldOutLabel}
|
|
38
|
+
</div>
|
|
39
|
+
)}
|
|
40
|
+
|
|
30
41
|
<div className="max-w-7xl mx-auto px-6 pt-16">
|
|
31
42
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
32
43
|
|
|
@@ -67,8 +78,19 @@ const LargeItemCard = ({
|
|
|
67
78
|
</div>
|
|
68
79
|
)}
|
|
69
80
|
|
|
70
|
-
|
|
71
|
-
|
|
81
|
+
{/* Stock Availability */}
|
|
82
|
+
{amountAvailable !== undefined && amountAvailable > 0 && (
|
|
83
|
+
<div className="text-center lg:text-right text-sm content-text font-medium">
|
|
84
|
+
{availableLabel}: {amountAvailable}
|
|
85
|
+
</div>
|
|
86
|
+
)}
|
|
87
|
+
|
|
88
|
+
<div className="py-4 mb-4">
|
|
89
|
+
<RoundButton
|
|
90
|
+
variant="primary"
|
|
91
|
+
onClick={onButtonClick}
|
|
92
|
+
disabled={amountAvailable !== undefined && amountAvailable <= 0}
|
|
93
|
+
>
|
|
72
94
|
{buttonLabel}
|
|
73
95
|
</RoundButton>
|
|
74
96
|
</div>
|
|
@@ -9,6 +9,9 @@ const SmallItemCard = ({
|
|
|
9
9
|
description,
|
|
10
10
|
price,
|
|
11
11
|
discountPrice,
|
|
12
|
+
amountAvailable,
|
|
13
|
+
availableLabel = 'נותרו במלאי',
|
|
14
|
+
soldOutLabel = 'אזל במלאי',
|
|
12
15
|
className = '',
|
|
13
16
|
onClick,
|
|
14
17
|
onAddToCart,
|
|
@@ -57,6 +60,15 @@ const SmallItemCard = ({
|
|
|
57
60
|
</div>
|
|
58
61
|
</div>
|
|
59
62
|
|
|
63
|
+
{/* Sold Out Badge - Centered */}
|
|
64
|
+
{amountAvailable !== undefined && amountAvailable <= 0 && (
|
|
65
|
+
<div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
|
|
66
|
+
<div className="bg-red-500 text-white px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
|
|
67
|
+
{soldOutLabel}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
|
|
60
72
|
{/* Discount Badge */}
|
|
61
73
|
{hasDiscount && (
|
|
62
74
|
<div className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold shadow-lg">
|
|
@@ -108,8 +120,16 @@ const SmallItemCard = ({
|
|
|
108
120
|
)}
|
|
109
121
|
</div>
|
|
110
122
|
|
|
123
|
+
{/* Stock Availability */}
|
|
124
|
+
{amountAvailable !== undefined && amountAvailable > 0 && (
|
|
125
|
+
<div className="text-xs text-gray-600 font-medium mb-2">
|
|
126
|
+
{availableLabel}: {amountAvailable}
|
|
127
|
+
</div>
|
|
128
|
+
)}
|
|
129
|
+
|
|
111
130
|
<SmallButton
|
|
112
131
|
onClick={handleAddToCartClick}
|
|
132
|
+
disabled={amountAvailable !== undefined && amountAvailable <= 0}
|
|
113
133
|
className="w-full flex items-center justify-center gap-2"
|
|
114
134
|
>
|
|
115
135
|
<ShoppingCart size={16} />
|