feat: implement nav/pagination for swiper cards

src/components/SwiperCards/index.tsx

@@ -1,4 +1,5 @@
-import { EffectCards } from "swiper/modules"
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
+import { EffectCards, Navigation, Pagination } from "swiper/modules"
 import { Swiper, SwiperSlide } from "swiper/react"
 
 import type { ClassNameProp } from "@/lib/types"
@@ -11,10 +12,9 @@ import { useBentoBox } from "../BentoBox/useBentoBox"
 
 import "swiper/css"
 import "swiper/css/effect-cards"
-// import "swiper/css/navigation"
-// import "swiper/css/pagination"
+import "swiper/css/navigation"
+import "swiper/css/pagination"
 
-// TODO: Fix height constraints on
 const SwiperCards = ({ className }: ClassNameProp) => {
   const { items } = useBentoBox()
   return (
@@ -26,14 +26,20 @@ const SwiperCards = ({ className }: ClassNameProp) => {
     >
       <Title />
       <Swiper
-        className="mx-auto mt-4 h-fit max-w-128"
+        className="mx-auto mt-4 !flex h-fit max-w-128 flex-col items-center"
         effect="cards"
-        grabCursor
-        cssMode
-        modules={[EffectCards]}
+        pagination={{ clickable: true }}
+        navigation={{
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        }}
+        modules={[EffectCards, Pagination, Navigation]}
       >
         {items.map(({ className, ...item }) => (
-          <SwiperSlide key={item.title}>
+          <SwiperSlide
+            key={item.title}
+            className="overflow-visible rounded-2xl shadow-card-hover"
+          >
             <BentoCard
               imgHeight={220}
               className={cn(className, "bg-background text-body")}
@@ -42,6 +48,10 @@ const SwiperCards = ({ className }: ClassNameProp) => {
             />
           </SwiperSlide>
         ))}
+
+        <MdChevronLeft className="swiper-button-prev" />
+        <div className="swiper-pagination" />
+        <MdChevronRight className="swiper-button-next" />
       </Swiper>
     </div>
   )

src/styles/global.css

@@ -220,3 +220,49 @@
     }
   }
 }
+
+@layer components {
+  .swiper-horizontal > .swiper-pagination-bullets,
+  .swiper-pagination-bullets.swiper-pagination-horizontal {
+    @apply bg-background-highlight;
+  }
+
+  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
+    @apply !relative;
+  }
+
+  .swiper-pagination {
+    @apply relative mt-8 flex h-[26px] max-w-48 items-center justify-center rounded-full bg-background-highlight;
+  }
+
+  .swiper-pagination .swiper-pagination-bullet {
+    @apply bg-primary-high-contrast;
+  }
+
+  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal
+    .swiper-pagination-bullet-active {
+    @apply bg-primary-hover;
+  }
+
+  .swiper-button-prev,
+  .swiper-button-next {
+    @apply !h-6 !w-fit fill-primary px-2;
+
+    top: calc(100% - 11px) !important;
+    --nav-inset: calc(50% - 6rem);
+  }
+
+  .swiper-button-next {
+    inset-inline-end: var(--nav-inset) !important;
+    inset-inline-start: auto !important;
+  }
+
+  .swiper-button-prev {
+    inset-inline-end: auto !important;
+    inset-inline-start: var(--nav-inset) !important;
+  }
+}
+
+.swiper-slide-shadow {
+  background: transparent !important;
+}

src/styles/semantic-tokens.css

@@ -61,6 +61,11 @@
     --shadow-2-hover: 0px 0px 12px 2px var(--shadow-color-a);
     --shadow-3-hover: 0px 0px 24px 2px var(--shadow-color-a);
     --shadow-4-hover: 0px 0px 40px 2px var(--shadow-color-b);
+    --shadow-body-color-a: hsla(var(--gray-900), 0.25);
+    --shadow-body-color-b: hsla(var(--gray-900), 0.05);
+    --shadow-body-md: 0px 4px 4px 0px var(--shadow-body-color-a);
+    --shadow-body-lg: 0px -6px 10px 0px var(--shadow-body-color-b);
+
   }
 
   /* Dark mode token declarations */
@@ -98,5 +103,7 @@
     --shadow-2-hover: 0px 0px 12px 2px var(--shadow-color);
     --shadow-3-hover: 0px 0px 24px 2px var(--shadow-color);
     --shadow-4-hover: 0px 0px 40px 2px var(--shadow-color);
+    --shadow-body-color-a: hsla(var(--gray-600), 0.25);
+    --shadow-body-color-b: hsla(var(--gray-600), 0.05);
   }
 }

tailwind.config.ts

@@ -207,6 +207,7 @@ const config = {
           "var(--shadow-1), var(--shadow-2), var(--shadow-3), var(--shadow-4)",
         "svg-button-link-hover":
           "var(--shadow-1-hover), var(--shadow-2-hover), var(--shadow-3-hover), var(--shadow-4-hover)",
+        "card-hover": "var(--shadow-body-md), var(--shadow-body-lg)",
       },
       spacing: {
         7.5: "1.875rem",