Infinite Slider - Copy this React, Tailwind Component to your project

fix-this-slider-making-sure-that-the-slider-is-infinite:import-clsx-from-"clsx";-import-{-motion-}-from-"motion/react";-import-{-Children,-PropsWithChildren,-useCallback,-useEffect,-useMemo,-useState,-}-from-"react";-import-{-Button-}-from-"./Button";-type-SliderProps-=-PropsWithChildren<{-speed?:-number;-}>;-const-LIMIT_X-=-300;-const-OFFSET-=-600;-const-LIMIT_SELECTED_LEFT-=-7;-const-LIMIT_SELECTED_RIGHT-=-1;-const-DEFAULT_SELECTED-=-4;-export-const-Slider-=-({-children,-speed-=-0.3-}:-SliderProps)-=>-{-const-items-=-useMemo(()-=>-Children.toArray(children),-[children]);-const-[orderItems,-setOrderItems]-=-useState([...items,-...items,-...items]);-const-[direction,-setDirection]-=-useState<"left"-|-"right"-|-"initial">(-"initial"-);-const-[counter,-setCounter]-=-useState(0);-const-[turnAroundLeft,-setTurnAroundLeft]-=-useState(0);-const-[turnAroundRight,-setTurnAroundRight]-=-useState(0);-const-[selected,-setSelected]-=-useState(DEFAULT_SELECTED);-const-hideIndexes-=-useMemo(-()-=>-[-selected---4,-selected---3,-selected---2,-selected-+-2,-selected-+-3,-selected-+-4,-],-[selected]-);-const-swipe-=-useCallback(-(direction:-"left"-|-"right")-=>-{-console.log("turnAroundLeft:",-turnAroundLeft);-setDirection(direction);-if-(direction-===-"left")-{-setCounter((prev)-=>-{-return-prev---100;-});-setSelected((prev)-=>-{-//-if-(prev-===-LIMIT_SELECTED_LEFT)-return-DEFAULT_SELECTED;-return-prev-+-1;-});-}-if-(direction-===-"right")-{-setCounter((prev)-=>-{-if-(prev-===-LIMIT_X)-setTurnAroundRight((prev)-=>-prev-+-1);-return-prev-+-100;-});-setSelected((prev)-=>-{-//-if-(prev-===-LIMIT_SELECTED_RIGHT)-return-DEFAULT_SELECTED;-return-prev---1;-});-}-},-[orderItems,-selected,-counter]-);-return-(-<div-className="w-full-flex-flex-col-items-center-p-4">-<div-className={clsx(-"w-full-flex-justify-center-items-center-overflow-hidden-pb-20"-)}->-{orderItems.map((item,-index)-=>-{-const-x-=-`${counter}%`;-const-y-=-`${selected-===-index-?-0-:-20}%`;-const-scale-=-`${selected-===-index-?-100-:-80}%`;-const-opacity-=-hideIndexes.includes(index)-?-0-:-1;-return-(-<motion.div-key={index}-initial={{-x:-`0%`,-y,-scale,-opacity-}}-animate={{-x,-y,-scale,-opacity-}}-transition={{-duration:-0.3,-ease:-"linear"-}}-className={clsx({-"border-border-red-500":-selected-===-index,-})}->-{item}-<span-className="text-white">{`selected-${selected}`}</span>-</motion.div>-);-})}-</div>-<div-className="w-full-flex-justify-center-items-center-gap-4-">-<Button-onClick={()-=>-swipe("left")}>{"<"}</Button>-<Button-onClick={()-=>-swipe("right")}>{">"}</Button>-</div>-</div>-);-};