diff --git a/src/app/(marketing)/create-profile/_components/ChoosePass.tsx b/src/app/(marketing)/create-profile/_components/ChoosePass.tsx index 4d26848166..f6670198ca 100644 --- a/src/app/(marketing)/create-profile/_components/ChoosePass.tsx +++ b/src/app/(marketing)/create-profile/_components/ChoosePass.tsx @@ -10,8 +10,7 @@ import { } from "@/components/ui/Carousel" import { Separator } from "@/components/ui/Separator" import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group" -import Autoplay from "embla-carousel-autoplay" -import { useEffect, useMemo, useState } from "react" +import { useEffect, useState } from "react" import { SUBSCRIPTIONS } from "../constants" import { OnboardingChain } from "../types" import { Benefits } from "./Benefits" @@ -20,13 +19,8 @@ import { GuildPassScene } from "./GuildPassScene" export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => { const [api, setApi] = useState() const [subscriptionIndex, setSubscriptionIndex] = useState() - const [autoplay, setAutoPlay] = useState(true) const { selectedIndex, scrollSnaps, onCarouselDotButtonClick } = useCarouselDotButton(api) - const carouselPlugins = useMemo( - () => [Autoplay({ delay: 4000, stopOnInteraction: true, active: autoplay })], - [autoplay] - ) useEffect(() => { if (subscriptionIndex === undefined) return dispatchChainAction("next", { @@ -42,7 +36,9 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => { {SUBSCRIPTIONS.map(({ title, description, pricing }, i) => ( @@ -76,10 +72,7 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => { {scrollSnaps.map((_, i) => ( { - setAutoPlay(false) - onCarouselDotButtonClick(i) - }} + onClick={() => onCarouselDotButtonClick(i)} isActive={i === selectedIndex} /> ))}