fix: notices slider on mobile

src/components/NewNotices.tsx

@@ -1,13 +1,21 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { A11y, Pagination, Navigation } from "swiper";
 import Link from "next/link";
+import useBreakpoint from "@hooks/useBreakpoint";
 
 export default function NewNotices({ notifications }) {
+  const breakpoint = useBreakpoint();
+
+  console.log(breakpoint);
   return (
     <div className="swiper--notices overflow-hidden relative pb-16">
       <Swiper
         modules={[A11y, Pagination, Navigation]}
-        slidesPerView={5}
+        slidesPerView={
+          (breakpoint === "sm" && 2) ||
+          (breakpoint === "md" && 3) ||
+          (breakpoint === "lg" && 5)
+        }
         pagination={{ clickable: true }}
         navigation
         className="cursor-move"

src/hooks/useBreakpoint.ts

@@ -0,0 +1,11 @@
+import { createBreakpoint } from 'react-use'
+
+const useBreakpoint = createBreakpoint({
+  'sm': 640,
+  'md': 768,
+  'lg': 1024,
+  'xl': 1280,
+  '2xl': 1536
+})
+
+export default useBreakpoint

src/styles/components/_swiper.scss

@@ -49,6 +49,7 @@
 
 .swiper--notices {
   .swiper-pagination {
+    @apply hidden md:block;
     bottom: -3rem !important;
   }