feat: useBreakpointValues for slidesPerView

Author: wackerow

app/[locale]/enterprise/_components/CasesSwiper.tsx

@@ -6,20 +6,29 @@ import type { Case } from "../types"
 
 import CaseCard from "./CaseCard"
 
-const CasesSwiper = ({ cases }: { cases: Case[] }) => (
-  <Swiper spaceBetween={8} slidesPerView={1.2}>
-    {cases.map((caseStudy) => (
-      <SwiperSlide
-        key={caseStudy.name}
-        className="first:ms-4 [&:last-child_div]:w-[calc(100%-2rem)]"
-      >
-        <CaseCard
-          caseStudy={caseStudy}
-          className="h-full w-full !shadow-none"
-        />
-      </SwiperSlide>
-    ))}
-  </Swiper>
-)
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+const CasesSwiper = ({ cases }: { cases: Case[] }) => {
+  const slidesPerView = useBreakpointValue({
+    base: 1.2,
+    sm: 2.4,
+  })
+
+  return (
+    <Swiper spaceBetween={8} slidesPerView={slidesPerView}>
+      {cases.map((caseStudy) => (
+        <SwiperSlide
+          key={caseStudy.name}
+          className="first:ms-4 [&:last-child_div]:w-[calc(100%-2rem)]"
+        >
+          <CaseCard
+            caseStudy={caseStudy}
+            className="h-full w-full !shadow-none"
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
 
 export default CasesSwiper

app/[locale]/enterprise/_components/FeaturesSwiper.tsx

@@ -6,17 +6,26 @@ import type { Feature } from "../types"
 
 import FeatureCard from "./FeatureCard"
 
-const FeaturesSwiper = ({ features }: { features: Feature[] }) => (
-  <Swiper spaceBetween={8} slidesPerView={1.1}>
-    {features.map((feature) => (
-      <SwiperSlide
-        key={feature.header}
-        className="first:ms-4 [&:last-child_div]:me-8"
-      >
-        <FeatureCard feature={feature} className="h-full !shadow-none" />
-      </SwiperSlide>
-    ))}
-  </Swiper>
-)
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+const FeaturesSwiper = ({ features }: { features: Feature[] }) => {
+  const slidesPerView = useBreakpointValue({
+    base: 1.1,
+    sm: 1.5,
+  })
+
+  return (
+    <Swiper spaceBetween={8} slidesPerView={slidesPerView}>
+      {features.map((feature) => (
+        <SwiperSlide
+          key={feature.header}
+          className="first:ms-4 [&:last-child_div]:me-8"
+        >
+          <FeatureCard feature={feature} className="h-full !shadow-none" />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
 
 export default FeaturesSwiper