Merge pull request #13904 from ethereum/slider-swiper

Migrate Slider usage to new Swiper

Author: corwintines

package.json

@@ -54,7 +54,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",

src/components/Slider/Slider.stories.tsx

@@ -1,7 +1,10 @@
 import { useTranslation } from "next-i18next"
 import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules"
-import { Swiper as SwiperParent, SwiperSlide } from "swiper/react"
-import type { SwiperOptions } from "swiper/types"
+import {
+  Swiper as SwiperParent,
+  type SwiperProps as SwiperParentProps,
+  SwiperSlide,
+} from "swiper/react"
 
 import { ChevronNext, ChevronPrev } from "@/components/Chevron"
 
@@ -12,23 +15,27 @@ import "swiper/css/navigation"
 import "swiper/css/pagination"
 import "swiper/css/effect-cards"
 
-type SwiperProps = {
+type SwiperProps = SwiperParentProps & {
   children: React.ReactNode[]
-  options?: SwiperOptions
-  className?: string
-  swiperClass?: string
+  /**
+   * Additional class names for the container element.
+   */
+  containerClassName?: string
+  /**
+   * Additional class names for the slider element.
+   */
   sliderClass?: string
 }
+
 const Swiper = ({
   children,
-  className,
-  swiperClass,
+  containerClassName,
   sliderClass,
-  options,
+  ...props
 }: SwiperProps) => {
   const { t } = useTranslation("common")
   return (
-    <div className={cn("h-fit", className)}>
+    <div className={cn("h-fit", containerClassName)}>
       <SwiperParent
         navigation={{
           nextEl: ".swiper-button-next",
@@ -43,8 +50,7 @@ const Swiper = ({
         modules={[Navigation, Pagination, Keyboard, EffectCards]}
         slidesPerView={1}
         slidesPerGroup={1}
-        className={swiperClass}
-        {...options}
+        {...props}
       >
         {children.map((child, index) => (
           <SwiperSlide className={sliderClass} key={index}>

src/components/Slider/index.tsx

@@ -251,8 +251,8 @@ const HomePage = ({
 
           {/* Mobile */}
           <Swiper
-            options={{ effect: "cards" }}
-            className={cn(
+            effect="cards"
+            containerClassName={cn(
               "lg:hidden", // Mobile only
               "[&_.swiper-slide]:overflow-visible [&_.swiper-slide]:rounded-2xl [&_.swiper-slide]:shadow-card-hover",
               "[&_.swiper]:mx-auto [&_.swiper]:mt-4 [&_.swiper]:!flex [&_.swiper]:h-fit [&_.swiper]:max-w-128 [&_.swiper]:flex-col [&_.swiper]:items-center"
@@ -582,18 +582,16 @@ const HomePage = ({
           <p>{t("page-index:page-index-posts-subtitle")}</p>
 
           <Swiper
-            className="mt-4 md:mt-16"
-            options={{
-              spaceBetween: 32,
-              breakpoints: {
-                [breakpointAsNumber.sm]: {
-                  slidesPerView: 2,
-                  slidesPerGroup: 2,
-                },
-                [breakpointAsNumber.lg]: {
-                  slidesPerView: 3,
-                  slidesPerGroup: 3,
-                },
+            containerClassName="mt-4 md:mt-16"
+            spaceBetween={32}
+            breakpoints={{
+              [breakpointAsNumber.sm]: {
+                slidesPerView: 2,
+                slidesPerGroup: 2,
+              },
+              [breakpointAsNumber.lg]: {
+                slidesPerView: 3,
+                slidesPerGroup: 3,
               },
             }}
           >