feat: improve swiper configs

frontChapter · Jan 22, 2024 · 72d6b38 · 72d6b38
1 parent 6487b2c
commit 72d6b38
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 17 deletions.
diff --git a/src/app/components/Tweets/TweetCard.tsx b/src/app/components/Tweets/TweetCard.tsx
@@ -5,7 +5,7 @@ import Saleh from "@/assets/images/tweets/saleh.png";
 
 const TweetCard = () => {
   return (
-    <article className="flex w-[17rem] flex-col gap-3 rounded-xl bg-zinc-800 p-4">
+    <article className="flex w-72 flex-col gap-3 rounded-xl bg-zinc-800 p-4">
       <header className="flex justify-between">
         <RiTwitterXFill className="text-2xl text-zinc-400" />
         <div className="flex gap-2">

diff --git a/src/app/components/Tweets/Tweets.tsx b/src/app/components/Tweets/Tweets.tsx
@@ -3,6 +3,7 @@
 import TweetCard from "./TweetCard";
 import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
 import "swiper/css";
 
 const Tweets = () => {
@@ -31,23 +32,9 @@ const Tweets = () => {
       </div>
 
       <div className="select-none">
-        <Swiper
-          spaceBetween={50}
-          slidesPerView={1}
-          loop={true}
-          breakpoints={{
-            768: {
-              slidesPerView: 3,
-              spaceBetween: 40,
-            },
-            1024: {
-              slidesPerView: 4,
-              spaceBetween: 50,
-            },
-          }}
-        >
+        <Swiper slidesPerView="auto" autoplay loop modules={[Autoplay]}>
           {new Array(10).fill(0).map((_, index) => (
-            <SwiperSlide key={index}>
+            <SwiperSlide key={index} className="ms-4 !w-auto xl:ms-6">
               <TweetCard />
             </SwiperSlide>
           ))}