pidor

src/assets/icons/pagintaion-arr.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_136_1482)">
+<rect width="24" height="24" transform="translate(24 24) rotate(-180)" fill="#38A39D"/>
+<path d="M10.1703 4.99997C10.3197 4.99946 10.4673 5.03243 10.6023 5.09646C10.7373 5.16049 10.8562 5.25395 10.9503 5.36997L15.7803 11.37C15.9274 11.5489 16.0078 11.7733 16.0078 12.005C16.0078 12.2366 15.9274 12.461 15.7803 12.64L10.7803 18.64C10.6106 18.8442 10.3667 18.9726 10.1022 18.997C9.83782 19.0214 9.57454 18.9397 9.37033 18.77C9.16611 18.6002 9.03768 18.3563 9.0133 18.0919C8.98893 17.8275 9.07059 17.5642 9.24033 17.36L13.7103 12L9.39033 6.63997C9.26804 6.49318 9.19037 6.31444 9.16649 6.12489C9.14261 5.93534 9.17352 5.74292 9.25558 5.57039C9.33764 5.39786 9.4674 5.25245 9.62951 5.15136C9.79162 5.05027 9.97929 4.99773 10.1703 4.99997Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_136_1482">
+<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

src/components/global/CustomNewsScroll.tsx

@@ -1,19 +1,24 @@
 // Modules
-import { v4 as uuidv4 } from "uuid";
+import { useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 // Components
-import News from "../news/News";
-import Loader from "./Loader";
+import News from '../news/News';
+import Loader from './Loader';
+import Pagination from './Pagination';
 
 // Types
-import { IPostsData } from "../../types/data.types";
+import { IPostsData } from '../../types/data.types';
 
 interface IProps {
   data: IPostsData[];
-  word: string | undefined;
+  word?: string;
+  pagination: boolean;
 }
 
-const CustomNewsScroll = ({ data, word }: IProps) => {
+const CustomNewsScroll = ({ data, word, pagination = true }: IProps) => {
+  const [activePage, setActivePage] = useState<number | string>(1);
+  const pageMemo = useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
   return (
     <div className="news-scroll">
       <div className="news-scroll-wrapper">
@@ -29,11 +34,7 @@ const CustomNewsScroll = ({ data, word }: IProps) => {
                     text={dataEl.excerpt}
                     date={dataEl.published_at}
                     categories={dataEl.categories}
-                    img={
-                      dataEl.featured_images[0]
-                        ? dataEl.featured_images[0].path
-                        : ""
-                    }
+                    img={dataEl.featured_images[0] ? dataEl.featured_images[0].path : ''}
                   />
                 );
               })
@@ -41,9 +42,16 @@ const CustomNewsScroll = ({ data, word }: IProps) => {
               <Loader />
             )
           ) : (
-            <p className="scroll-empty">Нет новостей для "{word || ""}" </p>
+            <p className="scroll-empty">Нет новостей для "{word || ''}" </p>
           )}
         </div>
+        {pagination ? (
+          <Pagination
+            pages={3}
+            activePage={pageMemo.activePage}
+            setActivePage={pageMemo.setActivePage}
+          />
+        ) : null}
       </div>
     </div>
   );

src/components/global/Pagination.tsx

@@ -0,0 +1,53 @@
+// Modules
+import { v4 as uuidv4 } from 'uuid';
+import { motion } from 'framer-motion';
+
+// Icons
+import { Dispatch, SetStateAction } from 'react';
+import { ReactComponent as Arr } from '../../assets/icons/pagintaion-arr.svg';
+
+// Animation
+import { paginationMotion } from '../../animations/pagination.animation';
+
+interface IProps {
+  pages: number;
+  activePage: number | string;
+  setActivePage: Dispatch<SetStateAction<number | string>>;
+}
+
+const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
+  const handleOnClick = (page: number) => {
+    setActivePage(page);
+  };
+  return (
+    <div className="pagination-wrapper">
+      <button
+        disabled={(activePage as number) - 1 < 1}
+        onClick={() => handleOnClick((activePage as number) - 1)}>
+        <Arr className="pagination-arr pagination-arr-left" />
+      </button>
+      <div className="pagination-nums">
+        {Array.from(Array(typeof pages === 'string' ? parseInt(pages) : pages).keys()).map(
+          (page) => (
+            <motion.div
+              key={uuidv4()}
+              className="pagination-nums-item"
+              onClick={() => handleOnClick(page + 1)}
+              variants={paginationMotion}
+              initial={'rest'}
+              animate={activePage === page + 1 ? 'active' : 'rest'}>
+              <span>{page + 1}</span>
+            </motion.div>
+          ),
+        )}
+      </div>
+      <button
+        disabled={(activePage as number) + 1 > pages}
+        onClick={() => handleOnClick((activePage as number) + 1)}>
+        <Arr className="pagination-arr pagination-arr-right" />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

src/styles/_pagination.scss

@@ -0,0 +1,30 @@
+.pagination-wrapper {
+  display: flex;
+  gap: 4rem;
+}
+
+.pagination-nums {
+  display: flex;
+  gap: 2.4rem;
+}
+
+.pagination-nums-item {
+  width: 2.4rem;
+  height: 2.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 0.1rem solid $main;
+  background: $main;
+  color: $white;
+
+  span {
+    font-size: 1.8rem;
+    pointer-events: none;
+  }
+}
+
+.pagination-arr-left {
+  transform: rotateY(180deg);
+}

src/styles/style.scss

@@ -1,17 +1,18 @@
-@import "./variables";
-@import "./mixins";
-@import "./general";
-@import "./nav";
-@import "./main";
-@import "./videos";
-@import "./section-title";
-@import "./footer";
-@import "./news";
-@import "./asideNews";
-@import "./aside";
-@import "./news-section";
-@import "./news-article";
-@import "./category";
-@import "./calendar";
-@import "./loader";
-@import "./search-result";
+@import './variables';
+@import './mixins';
+@import './general';
+@import './nav';
+@import './main';
+@import './videos';
+@import './section-title';
+@import './footer';
+@import './news';
+@import './asideNews';
+@import './aside';
+@import './news-section';
+@import './news-article';
+@import './category';
+@import './calendar';
+@import './loader';
+@import './search-result';
+@import './pagination';