Open joaoluke opened 1 year ago
I'm using the carousel to select days of the month. It only renders 5 days per slide, it turns out that if we are on the 27th of the month, it will take a long time for the user to go through the slide until the 27th.
export function ItemsCarousel({ children }: ItemsCarouselProps) { return ( <Carousel responsive={responsive} autoPlay={false} shouldResetAutoplay={false} focusOnSelect centerMode containerClass="carousel-container" itemClass="carousel-item" > {children} </Carousel> ); }
export function MonthButton({ month, isActive, onMonthSelect, }: MonthButtonProps) { return ( <Button onClick={() => onMonthSelect(month.numeric)} w="100%" bg={isActive ? 'brand-orange.300' : 'transparent'} color={isActive ? 'white' : 'brand-dark.500'} pointerEvents={isActive ? 'none' : 'all'} > {month.name} </Button> ); }
I want to make it so that on the 27th if it is 'active' it appears on the slide on the screen as soon as the component is loaded.
I'm using the carousel to select days of the month. It only renders 5 days per slide, it turns out that if we are on the 27th of the month, it will take a long time for the user to go through the slide until the 27th.
I want to make it so that on the 27th if it is 'active' it appears on the slide on the screen as soon as the component is loaded.