hds-web 1.30.2 → 1.30.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.
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Carousels/carouselB.js +53 -23
package/package.json
CHANGED
|
@@ -37,7 +37,7 @@ export default function HomePageCarousel(props) {
|
|
|
37
37
|
|
|
38
38
|
const previousCard = () => {
|
|
39
39
|
let scrollByAmount = 1;
|
|
40
|
-
|
|
40
|
+
|
|
41
41
|
|
|
42
42
|
if (currentCard > 0) {
|
|
43
43
|
setCurrentCard(currentCard - scrollByAmount);
|
|
@@ -58,25 +58,55 @@ export default function HomePageCarousel(props) {
|
|
|
58
58
|
|
|
59
59
|
const maxVisibleCards = 6;
|
|
60
60
|
|
|
61
|
-
const arrowStyle = ' text-2xl z-10 bg-black h-
|
|
61
|
+
const arrowStyle = ' text-2xl z-10 bg-black h-12 w-12 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center shadow';
|
|
62
|
+
|
|
63
|
+
const disableButton = (current, dir) => {
|
|
64
|
+
if (dir === 'isLeft') {
|
|
65
|
+
if (current === 0) return true;
|
|
66
|
+
else return false
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
if (dir === 'isRight') {
|
|
70
|
+
if (current === 2) return true;
|
|
71
|
+
else return false
|
|
72
|
+
}
|
|
73
|
+
|
|
62
74
|
|
|
63
|
-
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const sliderLeftControl = () => (
|
|
64
78
|
<button
|
|
65
79
|
type="button"
|
|
66
|
-
onClick={isLeft ? previousCard : nextCard}
|
|
67
|
-
className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
|
|
68
|
-
|
|
69
|
-
>
|
|
70
|
-
<span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
|
|
71
|
-
{isLeft ?
|
|
72
80
|
|
|
73
|
-
|
|
81
|
+
onClick={() => {
|
|
74
82
|
|
|
75
|
-
|
|
83
|
+
previousCard();
|
|
84
|
+
}}
|
|
85
|
+
className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
|
|
86
|
+
disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
|
|
87
|
+
>
|
|
88
|
+
<span role="img" aria-label={`Arrow left `}>
|
|
89
|
+
{(
|
|
90
|
+
<Icon height={'h-6 w-6 stroke-[1.5]'} variant={'arrowleft'} strokeColor='#1F2A37' />
|
|
91
|
+
)}
|
|
92
|
+
</span>
|
|
93
|
+
</button>
|
|
94
|
+
);
|
|
95
|
+
const sliderRightControl = () => (
|
|
96
|
+
<button
|
|
97
|
+
type="button"
|
|
76
98
|
|
|
77
|
-
|
|
99
|
+
onClick={() => {
|
|
78
100
|
|
|
79
|
-
|
|
101
|
+
nextCard();
|
|
102
|
+
}}
|
|
103
|
+
className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
|
|
104
|
+
disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
|
|
105
|
+
>
|
|
106
|
+
<span role="img" aria-label={`Arrow right `}>
|
|
107
|
+
{(
|
|
108
|
+
<Icon height={'h-6 w-6 stroke-[1.5]'} variant={'arrowright'} strokeColor='#1F2A37' />
|
|
109
|
+
)}
|
|
80
110
|
</span>
|
|
81
111
|
</button>
|
|
82
112
|
);
|
|
@@ -130,32 +160,32 @@ export default function HomePageCarousel(props) {
|
|
|
130
160
|
<div className="flex pt-10 justify-center items-center">
|
|
131
161
|
{/* {slider()} */}
|
|
132
162
|
<div className="flex">
|
|
133
|
-
{
|
|
134
|
-
{
|
|
163
|
+
{sliderLeftControl()}
|
|
164
|
+
{sliderRightControl()}
|
|
135
165
|
</div>
|
|
136
166
|
</div>
|
|
137
167
|
<div className="justify-center select-none items-center"
|
|
138
|
-
|
|
168
|
+
|
|
139
169
|
>
|
|
140
170
|
<div className="">
|
|
141
|
-
<div className={`snap-
|
|
171
|
+
<div className={`snap-center w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
|
|
142
172
|
ref={carouselRef}
|
|
143
173
|
>
|
|
144
174
|
|
|
145
175
|
{props.cards.map((item, i) => (
|
|
146
|
-
<div className="
|
|
147
|
-
<div className="w-full select-none rounded-3xl object-contain">
|
|
176
|
+
<div className="snap-center first:ml-0 mx-5 shrink-0" key={i} ref={refs[i]}>
|
|
177
|
+
<div className="w-full snap-center select-none rounded-3xl object-contain">
|
|
148
178
|
{React.createElement(props.component, item)}
|
|
149
179
|
</div>
|
|
150
180
|
|
|
151
181
|
</div>
|
|
152
182
|
))}
|
|
153
|
-
<div className="
|
|
183
|
+
{/* <div className="snap-center mx-5 shrink-0" key={totalCards}>
|
|
154
184
|
<div className="w-full select-none rounded-3xl object-contain">
|
|
155
185
|
{React.createElement(props.component, props.cards[0])}
|
|
156
186
|
</div>
|
|
157
|
-
</div>
|
|
158
|
-
|
|
187
|
+
</div> */}
|
|
188
|
+
|
|
159
189
|
|
|
160
190
|
</div>
|
|
161
191
|
</div>
|
|
@@ -164,4 +194,4 @@ export default function HomePageCarousel(props) {
|
|
|
164
194
|
|
|
165
195
|
</div>
|
|
166
196
|
);
|
|
167
|
-
};
|
|
197
|
+
};
|