@codesinger0/shared-components 1.1.104 → 1.1.106
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.
|
@@ -4,8 +4,7 @@ import Autoplay from 'embla-carousel-autoplay';
|
|
|
4
4
|
|
|
5
5
|
const FullscreenCarousel = ({
|
|
6
6
|
slides = [],
|
|
7
|
-
|
|
8
|
-
mobileHeight = '100vh',
|
|
7
|
+
height = '500px',
|
|
9
8
|
autoplay = true,
|
|
10
9
|
scrollInterval = 5000,
|
|
11
10
|
loop = true,
|
|
@@ -18,7 +17,6 @@ const FullscreenCarousel = ({
|
|
|
18
17
|
const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
|
|
19
18
|
const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
|
|
20
19
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
21
|
-
const [scrollSnaps, setScrollSnaps] = useState([]);
|
|
22
20
|
|
|
23
21
|
// Embla carousel setup
|
|
24
22
|
const autoplayOptions = {
|
|
@@ -53,14 +51,13 @@ const FullscreenCarousel = ({
|
|
|
53
51
|
useEffect(() => {
|
|
54
52
|
if (!emblaApi) return;
|
|
55
53
|
onSelect();
|
|
56
|
-
setScrollSnaps(emblaApi.scrollSnapList());
|
|
57
54
|
emblaApi.on('select', onSelect);
|
|
58
55
|
emblaApi.on('reInit', onSelect);
|
|
59
56
|
}, [emblaApi, onSelect]);
|
|
60
57
|
|
|
61
58
|
if (!slides || slides.length === 0) {
|
|
62
59
|
return (
|
|
63
|
-
<div className="w-full flex items-center justify-center bg-gray-100" style={{ height
|
|
60
|
+
<div className="w-full flex items-center justify-center bg-gray-100" style={{ height }}>
|
|
64
61
|
<p className="text-gray-500">No slides to display</p>
|
|
65
62
|
</div>
|
|
66
63
|
);
|
|
@@ -68,78 +65,16 @@ const FullscreenCarousel = ({
|
|
|
68
65
|
|
|
69
66
|
return (
|
|
70
67
|
<div className={`fullscreen-carousel-wrapper ${className}`} {...props}>
|
|
71
|
-
<div className="fullscreen-carousel" dir="rtl">
|
|
68
|
+
<div className="fullscreen-carousel" style={{ height }} dir="rtl">
|
|
72
69
|
<div className="fullscreen-carousel__viewport" ref={emblaRef}>
|
|
73
70
|
<div className="fullscreen-carousel__container">
|
|
74
|
-
{slides.map((slide, index) =>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<div key={index} className="fullscreen-carousel__slide">
|
|
79
|
-
{isSingleSlide ? (
|
|
80
|
-
/* Single Slide Mode */
|
|
81
|
-
<>
|
|
82
|
-
<div
|
|
83
|
-
className="hidden md:block w-full h-full"
|
|
84
|
-
style={{ height: desktopHeight }}
|
|
85
|
-
>
|
|
86
|
-
{slide.content}
|
|
87
|
-
</div>
|
|
88
|
-
<div
|
|
89
|
-
className="block md:hidden w-full h-full"
|
|
90
|
-
style={{ height: mobileHeight }}
|
|
91
|
-
>
|
|
92
|
-
{slide.content}
|
|
93
|
-
</div>
|
|
94
|
-
</>
|
|
95
|
-
) : (
|
|
96
|
-
<>
|
|
97
|
-
{/* Desktop Layout - Horizontal Split */}
|
|
98
|
-
<div
|
|
99
|
-
className="hidden md:grid md:grid-cols-2 w-full h-full"
|
|
100
|
-
style={{ height: desktopHeight }}
|
|
101
|
-
>
|
|
102
|
-
<div className="w-full h-full">
|
|
103
|
-
{slide.leftContent}
|
|
104
|
-
</div>
|
|
105
|
-
<div className="w-full h-full">
|
|
106
|
-
{slide.rightContent}
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
{/* Mobile Layout - Vertical Split */}
|
|
111
|
-
<div
|
|
112
|
-
className="md:hidden grid grid-rows-2 w-full h-full"
|
|
113
|
-
style={{ height: mobileHeight }}
|
|
114
|
-
>
|
|
115
|
-
<div className="w-full h-full">
|
|
116
|
-
{slide.leftContent}
|
|
117
|
-
</div>
|
|
118
|
-
<div className="w-full h-full">
|
|
119
|
-
{slide.rightContent}
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
</>
|
|
123
|
-
)}
|
|
124
|
-
</div>
|
|
125
|
-
);
|
|
126
|
-
})}
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
|
|
130
|
-
{/* Dots indicator */}
|
|
131
|
-
{showDots && slides.length > 1 && (
|
|
132
|
-
<div className="fullscreen-carousel__dots">
|
|
133
|
-
{scrollSnaps.map((_, index) => (
|
|
134
|
-
<button
|
|
135
|
-
key={index}
|
|
136
|
-
className={`fullscreen-carousel__dot ${index === selectedIndex ? 'fullscreen-carousel__dot--selected' : ''}`}
|
|
137
|
-
onClick={() => scrollTo(index)}
|
|
138
|
-
aria-label={`Go to slide ${index + 1}`}
|
|
139
|
-
/>
|
|
71
|
+
{slides.map((slide, index) => (
|
|
72
|
+
<div key={index} className="fullscreen-carousel__slide">
|
|
73
|
+
{slide.content}
|
|
74
|
+
</div>
|
|
140
75
|
))}
|
|
141
76
|
</div>
|
|
142
|
-
|
|
77
|
+
</div>
|
|
143
78
|
|
|
144
79
|
{/* Navigation buttons */}
|
|
145
80
|
{showArrows && slides.length > 1 && (
|
|
@@ -166,6 +101,20 @@ const FullscreenCarousel = ({
|
|
|
166
101
|
</button>
|
|
167
102
|
</>
|
|
168
103
|
)}
|
|
104
|
+
|
|
105
|
+
{/* Dots indicator */}
|
|
106
|
+
{showDots && slides.length > 1 && (
|
|
107
|
+
<div className="fullscreen-carousel__dots">
|
|
108
|
+
{slides.map((_, index) => (
|
|
109
|
+
<button
|
|
110
|
+
key={index}
|
|
111
|
+
className={`fullscreen-carousel__dot ${index === selectedIndex ? 'fullscreen-carousel__dot--selected' : ''}`}
|
|
112
|
+
onClick={() => scrollTo(index)}
|
|
113
|
+
aria-label={`Go to slide ${index + 1}`}
|
|
114
|
+
/>
|
|
115
|
+
))}
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
169
118
|
</div>
|
|
170
119
|
|
|
171
120
|
{/* Styles */}
|
|
@@ -173,7 +122,6 @@ const FullscreenCarousel = ({
|
|
|
173
122
|
.fullscreen-carousel-wrapper {
|
|
174
123
|
position: relative;
|
|
175
124
|
width: 100%;
|
|
176
|
-
overflow: hidden;
|
|
177
125
|
}
|
|
178
126
|
|
|
179
127
|
.fullscreen-carousel {
|
|
@@ -184,17 +132,20 @@ const FullscreenCarousel = ({
|
|
|
184
132
|
.fullscreen-carousel__viewport {
|
|
185
133
|
overflow: hidden;
|
|
186
134
|
width: 100%;
|
|
135
|
+
height: 100%;
|
|
187
136
|
}
|
|
188
|
-
|
|
137
|
+
|
|
189
138
|
.fullscreen-carousel__container {
|
|
190
139
|
display: flex;
|
|
191
140
|
width: 100%;
|
|
141
|
+
height: 100%;
|
|
192
142
|
}
|
|
193
143
|
|
|
194
144
|
.fullscreen-carousel__slide {
|
|
195
145
|
flex: 0 0 100%;
|
|
196
146
|
min-width: 0;
|
|
197
147
|
position: relative;
|
|
148
|
+
height: 100%;
|
|
198
149
|
}
|
|
199
150
|
|
|
200
151
|
.fullscreen-carousel__button {
|
|
@@ -266,12 +217,19 @@ const FullscreenCarousel = ({
|
|
|
266
217
|
display: flex;
|
|
267
218
|
justify-content: center;
|
|
268
219
|
gap: 0.5rem;
|
|
269
|
-
|
|
270
|
-
bottom: 2rem;
|
|
271
|
-
left: 50%;
|
|
272
|
-
transform: translateX(-50%);
|
|
220
|
+
padding: 1rem 0;
|
|
273
221
|
z-index: 10;
|
|
274
222
|
}
|
|
223
|
+
|
|
224
|
+
@media (min-width: 768px) {
|
|
225
|
+
.fullscreen-carousel__dots {
|
|
226
|
+
position: absolute;
|
|
227
|
+
bottom: 2rem;
|
|
228
|
+
left: 50%;
|
|
229
|
+
transform: translateX(-50%);
|
|
230
|
+
padding: 0;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
275
233
|
|
|
276
234
|
.fullscreen-carousel__dot {
|
|
277
235
|
background-color: ${dotsColor};
|