Skip to content

Commit 77d5584

Browse files
Fix: Onboarding carousel type error
Fixes a TypeScript error in `OnboardingCarousel.tsx` related to `setCurrentSlide` being passed an incorrect type. The error occurs on line 69, where the `onSelect` function is being called.
1 parent 7c50a9c commit 77d5584

File tree

1 file changed

+16
-3
lines changed

1 file changed

+16
-3
lines changed

src/components/OnboardingCarousel.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

2-
import { useState } from 'react';
2+
import { useState, useEffect } from 'react';
33
import { Button } from '@/components/ui/button';
44
import { Card, CardContent } from '@/components/ui/card';
5-
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
5+
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from '@/components/ui/carousel';
66
import { DashboardBackground } from '@/components/DashboardBackground';
77
import { RefSpringLogo } from '@/components/RefSpringLogo';
88
import { CheckCircle, Shield, TrendingUp, Rocket } from 'lucide-react';
@@ -48,6 +48,19 @@ const slides = [
4848

4949
export const OnboardingCarousel = ({ onComplete }: OnboardingCarouselProps) => {
5050
const [currentSlide, setCurrentSlide] = useState(0);
51+
const [api, setApi] = useState<CarouselApi>();
52+
53+
useEffect(() => {
54+
if (!api) {
55+
return;
56+
}
57+
58+
setCurrentSlide(api.selectedScrollSnap());
59+
60+
api.on('select', () => {
61+
setCurrentSlide(api.selectedScrollSnap());
62+
});
63+
}, [api]);
5164

5265
return (
5366
<div className="min-h-screen bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative overflow-hidden">
@@ -66,7 +79,7 @@ export const OnboardingCarousel = ({ onComplete }: OnboardingCarouselProps) => {
6679
<p className="text-slate-600">Découvrez comment fonctionne votre plateforme d'affiliation</p>
6780
</div>
6881

69-
<Carousel className="w-full" onSelect={(index) => setCurrentSlide(index || 0)}>
82+
<Carousel className="w-full" setApi={setApi}>
7083
<CarouselContent>
7184
{slides.map((slide, index) => {
7285
const IconComponent = slide.icon;

0 commit comments

Comments
 (0)