feat: add swiper

src/routes/onboarding/index.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { Helmet } from "react-helmet";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
 import WelcomePage from "./steps/welcomePage";
 import ServerName from "./steps/serverName";
 import AdminAccount from "./steps/adminAccount";
@@ -51,12 +53,30 @@ export default function OnboardingPage() {
       </Helmet>
       <StyledOnboardingPage>
         <Navigator {...serverSetup} />
-        {serverSetup.step === "welcomePage" && <WelcomePage {...serverSetup} />}
-        {serverSetup.step === "serverName" && <ServerName {...serverSetup} />}
-        {serverSetup.step === "adminAccount" && <AdminAccount {...serverSetup} />}
-        {serverSetup.step === "whoCanSignUp" && <WhoCanSignUp {...serverSetup} />}
-        {serverSetup.step === "inviteLink" && <InviteLink {...serverSetup} />}
-        {serverSetup.step === "donePage" && <DonePage {...serverSetup} />}
+        <Swiper
+          spaceBetween={50}
+          allowTouchMove={false}
+          onSwiper={(swiper) => serverSetup.setSwiper(swiper)}
+        >
+          <SwiperSlide>
+            <WelcomePage {...serverSetup} />
+          </SwiperSlide>
+          <SwiperSlide>
+            <ServerName {...serverSetup} />
+          </SwiperSlide>
+          <SwiperSlide>
+            <AdminAccount {...serverSetup} />
+          </SwiperSlide>
+          <SwiperSlide>
+            <WhoCanSignUp {...serverSetup} />
+          </SwiperSlide>
+          <SwiperSlide>
+            <InviteLink {...serverSetup} />
+          </SwiperSlide>
+          <SwiperSlide>
+            <DonePage {...serverSetup} />
+          </SwiperSlide>
+        </Swiper>
       </StyledOnboardingPage>
     </>
   );

src/routes/onboarding/styled.js

@@ -11,6 +11,7 @@ const StyledOnboardingPage = styled.div`
     display: flex;
     justify-content: center;
     gap: 8px;
+    z-index: 10;
 
     > .node,
     > .arrow {
@@ -19,6 +20,7 @@ const StyledOnboardingPage = styled.div`
       line-height: 28px;
       color: #101828;
       cursor: default;
+      transition: all 150ms ease-in-out;
 
       &.disabled {
         color: #d0d5dd;
@@ -37,6 +39,10 @@ const StyledOnboardingPage = styled.div`
       }
     }
   }
+
+  > .swiper {
+    height: 100%;
+  }
 `;
 
 export default StyledOnboardingPage;

src/routes/onboarding/useServerSetup.js

@@ -31,18 +31,32 @@ const steps = [
 ];
 
 export default function useServerSetup() {
+  const [swiper, setSwiper] = useState(null);
+
   const [index, setIndex] = useState(0);
   const step = steps[index].name;
-  const setStep = useCallback((name) => {
-    setIndex(steps.map((step) => step.name).indexOf(name));
-  }, []);
+  const setStep = useCallback(
+    (name) => {
+      const newIndex = steps.map((step) => step.name).indexOf(name);
+      setIndex(newIndex);
+      if (swiper !== null) {
+        swiper.slideTo(newIndex);
+      }
+    },
+    [swiper]
+  );
   const nextStep = useCallback(() => {
     setIndex((prev) => prev + 1);
-  }, []);
+    if (swiper !== null) {
+      swiper.slideNext(500);
+    }
+  }, [swiper]);
 
   const [serverName, setServerName] = useState("");
 
   return {
+    swiper,
+    setSwiper,
     step,
     setStep,
     nextStep,