feat: add stand-alone <TweetsSlider>

frontChapter · Jan 22, 2024 · 4f730ef · 4f730ef
1 parent 72d6b38
commit 4f730ef
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/src/app/components/Tweets/Tweets.tsx b/src/app/components/Tweets/Tweets.tsx
@@ -1,10 +1,5 @@
-"use client";
-
-import TweetCard from "./TweetCard";
 import Link from "next/link";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper/modules";
-import "swiper/css";
+import TweetsSlider from "./TweetsSlider";
 
 const Tweets = () => {
   return (
@@ -31,15 +26,7 @@ const Tweets = () => {
         </div>
       </div>
 
-      <div className="select-none">
-        <Swiper slidesPerView="auto" autoplay loop modules={[Autoplay]}>
-          {new Array(10).fill(0).map((_, index) => (
-            <SwiperSlide key={index} className="ms-4 !w-auto xl:ms-6">
-              <TweetCard />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
+      <TweetsSlider />
     </div>
   );
 };

diff --git a/src/app/components/Tweets/TweetsSlider.tsx b/src/app/components/Tweets/TweetsSlider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import TweetCard from "./TweetCard";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+import "swiper/css";
+
+const TweetsSlider = () => {
+  return (
+    <div className="select-none">
+      <Swiper slidesPerView="auto" autoplay loop modules={[Autoplay]}>
+        {new Array(10).fill(0).map((_, index) => (
+          <SwiperSlide key={index} className="ms-4 !w-auto xl:ms-6">
+            <TweetCard />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default TweetsSlider;