From ba495b18c5083c473ea7ba3f954cef50f3f113d7 Mon Sep 17 00:00:00 2001
From: to4to <justjustifying@outlook.com>
Date: Wed, 27 Nov 2024 23:16:06 +0530
Subject: [PATCH] feat: replace tweet grid with carousel

- Implemented a carousel layout for displaying tweets, replacing the existing grid structure.
- Ensured responsive design and smooth user interactions.
- Updated related components and styles for compatibility.

Closes: #[2437]
Signed-off-by: to4to <justjustifying@outlook.com>
---
 components/TwitterTestimonials.tsx | 96 ++++++++++++++++--------------
 package-lock.json                  | 20 +++++++
 package.json                       |  1 +
 3 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/components/TwitterTestimonials.tsx b/components/TwitterTestimonials.tsx
index baa19a24..5adc0f26 100644
--- a/components/TwitterTestimonials.tsx
+++ b/components/TwitterTestimonials.tsx
@@ -1,6 +1,13 @@
 "use client"
-import React, { useEffect, useState } from "react";
+import React, { useRef } from "react";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination, Autoplay, Navigation, FreeMode } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import 'swiper/css/free-mode';
 import Tweet from "./tweets";
+
 const tweets = [
   {
     avatar:
@@ -114,55 +121,54 @@ const tweets = [
 
 
 const TwitterTestimonials = () => {
+  const swiperRef = useRef(null);
 
   return (
-    <>
-      <div className="relative mt-20 mb-20">
-        <div className=" relative mt-2 mb-8 z-10 px-4 sm:px-6 max-w-6xl mx-auto flex flex-col justify-center">
-          <h3 className=" text-center h2 px-10 text-secondary-300">
-            We love when users talk about Keploy..
-          </h3>
-          {/* for mobile view */}
-          <div className="space-y-5 mt-10 sm:hidden block">
-            {
-              tweets?.slice(0,6).map((tweet, index) => {
-                return (
-                  <React.Fragment key={index}>
-                    <Tweet
-                      avatar={tweet.avatar}
-                      name={tweet.name}
-                      id={tweet.id}
-                      post={tweet.post}
-                      content={tweet.content}
-                    />
-                  </React.Fragment>
-                )
-              })
-            }
-          </div>
-
-          {/* sizes above sm(640px) */}
-          <div className="sm:columns-2 lg:columns-3 sm:gap-5 space-y-5 mt-10 hidden sm:block">
-            {
-              tweets?.map((tweet, index) => {
-                return (
-                  <React.Fragment key={index}>
-                    <Tweet
-                      avatar={tweet.avatar}
-                      name={tweet.name}
-                      id={tweet.id}
-                      post={tweet.post}
-                      content={tweet.content}
-                    />
-                  </React.Fragment>
-                )
-              })
-            }
-          </div>
+    <div className="relative mt-20 mb-20">
+      <div className="relative mt-2 mb-8 z-10 px-4 sm:px-6 max-w-6xl mx-auto flex flex-col justify-center">
+        <h3 className="text-center h2 px-10 text-secondary-300">
+          We love when users talk about Keploy..
+        </h3>
 
+        <div className="mt-10 relative">
+          <Swiper
+            ref={swiperRef}
+            modules={[Pagination, Autoplay, Navigation, FreeMode]}
+            spaceBetween={20}
+            slidesPerView={1}
+            pagination={{ clickable: true }}
+            navigation={true}
+            freeMode={true}
+            mousewheel={true}
+            autoplay={{
+              delay: 3000,
+              disableOnInteraction: false,
+            }}
+            breakpoints={{
+              640: {
+                slidesPerView: 2,
+              },
+              1024: {
+                slidesPerView: 3,
+              },
+            }}
+            className="tweet-carousel"
+          >
+            {tweets.map((tweet, index) => (
+              <SwiperSlide key={index}>
+                <Tweet
+                  avatar={tweet.avatar}
+                  name={tweet.name}
+                  id={tweet.id}
+                  post={tweet.post}
+                  content={tweet.content}
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/package-lock.json b/package-lock.json
index 31ff6423..f2ba1135 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "react-icons": "^5.0.1",
         "react-responsive-carousel": "^3.2.23",
         "react-swipeable": "^7.0.1",
+        "swiper": "^11.1.15",
         "tailwind-merge": "^2.4.0"
       },
       "devDependencies": {
@@ -11724,6 +11725,25 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
diff --git a/package.json b/package.json
index 372d0cb7..aaf9ce01 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "react-icons": "^5.0.1",
     "react-responsive-carousel": "^3.2.23",
     "react-swipeable": "^7.0.1",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {