From 8dd300528cead6201a88da4c463f13c1f0148d0d Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 9 Feb 2023 17:44:15 +0500
Subject: [PATCH] news article img -> slider

---
 src/components/news/NewsArticleImg.tsx    | 18 ++++++
 src/components/news/NewsArticleSlider.tsx | 46 +++++++++++++++
 src/pages/NewsArticle.tsx                 | 71 +++++++++++++----------
 src/styles/_news-article.scss             |  2 +-
 4 files changed, 105 insertions(+), 32 deletions(-)
 create mode 100644 src/components/news/NewsArticleImg.tsx
 create mode 100644 src/components/news/NewsArticleSlider.tsx

diff --git a/src/components/news/NewsArticleImg.tsx b/src/components/news/NewsArticleImg.tsx
new file mode 100644
index 0000000..ce35517
--- /dev/null
+++ b/src/components/news/NewsArticleImg.tsx
@@ -0,0 +1,18 @@
+// Modules
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+interface IProps {
+  img: string;
+  title: string;
+}
+
+const NewsArticleImg = ({ img, title }: IProps) => {
+  return (
+    <div className={"news-article-image"}>
+      <LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
+      <div className="swiper-lazy-preloader"></div>
+    </div>
+  );
+};
+
+export default NewsArticleImg;
diff --git a/src/components/news/NewsArticleSlider.tsx b/src/components/news/NewsArticleSlider.tsx
new file mode 100644
index 0000000..655fba9
--- /dev/null
+++ b/src/components/news/NewsArticleSlider.tsx
@@ -0,0 +1,46 @@
+// Modules
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, Autoplay } from "swiper";
+
+// Components
+import NewsArticleImg from "./NewsArticleImg";
+
+// Images
+import Placeholder from "../../assets/images/placeholder3.png";
+
+import { titlePlaceholder } from "../main/MainContent";
+
+const NewsArticleSlider = () => {
+  return (
+    <div className="news-article-slider">
+      <Swiper
+        spaceBetween={24}
+        slidesPerView={1}
+        loop
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        modules={[Navigation, Pagination, Autoplay]}
+        pagination={{
+          type: "bullets",
+        }}
+      >
+        <SwiperSlide>
+          <NewsArticleImg img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <NewsArticleImg img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <NewsArticleImg img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+        <SwiperSlide>
+          <NewsArticleImg img={Placeholder} title={titlePlaceholder} />
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
+
+export default NewsArticleSlider;
diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx
index e3d5241..2a38b1a 100644
--- a/src/pages/NewsArticle.tsx
+++ b/src/pages/NewsArticle.tsx
@@ -1,12 +1,15 @@
 // Modules
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
 // Components
-import Aside from '../components/aside/Aside';
+import Aside from "../components/aside/Aside";
+import NewsArticleSlider from "../components/news/NewsArticleSlider";
+
 // Images
-import placeholder from '../assets/images/placeholder3.png';
+import placeholder from "../assets/images/placeholder3.png";
+
 // Icons
-import share from '../assets/icons/share.svg';
-import { ReactComponent as Share } from '../assets/icons/share.svg';
+import { ReactComponent as Share } from "../assets/icons/share.svg";
 
 const NewsArticle = () => {
   return (
@@ -20,41 +23,47 @@ const NewsArticle = () => {
                 <h3 className="news-article-date">15:23, 21 января 2023</h3>
               </div>
               <h2 className="news-article-title">
-                В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на
-                2023 год
+                В федерации футбола Туркменистана подвели итоги прошедшего года
+                и наметили курс на 2023 год
               </h2>
             </div>
-            <div className="news-article-image">
-              <LazyLoadImage src={placeholder} alt="image" useIntersectionObserver effect="blur" />
+            <div className="news-article-slider-wrapper">
+              <NewsArticleSlider />
             </div>
             <p className="news-article-text">
-              Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam
-              commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
-              sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Vestibulum eget
-              elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
-              consectetur. <br />
-              <br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
-              Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum
-              dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
-              sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac
-              sodales.
+              Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
+              urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
+              sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
+              Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
+              urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
+              sit amet consectetur. <br />
+              <br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
+              sit amet consectetur. Vestibulum eget elementum urna tincidunt
+              diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
+              consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
+              dolor sit amet consectetur. Vestibulum eget elementum urna
+              tincidunt diam commodo mauris ac sodales.
               <br />
-              <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
-              tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
-              Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
+              <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
+              elementum urna tincidunt diam commodo mauris ac sodales. Lorem
+              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
+              consectetur. Lorem ipsum dolor sit amet consectetur.
               <br />
-              <br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
-              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
-              dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
+              <br /> Vestibulum eget elementum urna tincidunt diam commodo
+              mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
+              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
+              consectetur. Vestibulum eget elementum urna tincidunt diam commodo
               mauris ac sodales.
               <br />
-              <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
-              tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
-              Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
+              <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
+              elementum urna tincidunt diam commodo mauris ac sodales. Lorem
+              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
+              consectetur. Lorem ipsum dolor sit amet consectetur.
               <br />
-              <br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
-              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
-              dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
+              <br /> Vestibulum eget elementum urna tincidunt diam commodo
+              mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
+              ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
+              consectetur. Vestibulum eget elementum urna tincidunt diam commodo
               mauris ac sodales.
             </p>
             <button className="share-btn">
diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss
index e93f996..6236488 100644
--- a/src/styles/_news-article.scss
+++ b/src/styles/_news-article.scss
@@ -3,7 +3,7 @@
 }
 .news-article-inner {
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: calc(67% - 1.2rem) 1fr;
   gap: 2.4rem;
 }
 .news-article-info {