diff --git a/src/animations/pagination.animation.ts b/src/animations/pagination.animation.ts new file mode 100644 index 0000000..fd27806 --- /dev/null +++ b/src/animations/pagination.animation.ts @@ -0,0 +1,19 @@ +import { Variants } from 'framer-motion'; + +export const paginationMotion: Variants = { + rest: { + border: 'rgba(56,163,157, 0) 0.1rem solid', + color: '#272727', + background: '#fff', + // fontWeight: 'normal', + type: 'spring', + }, + active: { + border: 'rgba(56,163,157, 1) 0.1rem solid', + color: '#ffffff', + background: '#38a39d', + + // fontWeight: 'bold', + type: 'spring', + }, +}; diff --git a/src/assets/icons/pagintaion-arr.svg b/src/assets/icons/pagintaion-arr.svg new file mode 100644 index 0000000..c02e02f --- /dev/null +++ b/src/assets/icons/pagintaion-arr.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/global/CustomNewsScroll.tsx b/src/components/global/CustomNewsScroll.tsx index a72197c..07c1a62 100644 --- a/src/components/global/CustomNewsScroll.tsx +++ b/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(1); + const pageMemo = useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]); return (
@@ -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) => { ) ) : ( -

Нет новостей для "{word || ""}"

+

Нет новостей для "{word || ''}"

)}
+ {pagination ? ( + + ) : null}
); diff --git a/src/components/global/Pagination.tsx b/src/components/global/Pagination.tsx new file mode 100644 index 0000000..a6553f1 --- /dev/null +++ b/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>; +} + +const Pagination = ({ pages, activePage, setActivePage }: IProps) => { + const handleOnClick = (page: number) => { + setActivePage(page); + }; + return ( +
+ +
+ {Array.from(Array(typeof pages === 'string' ? parseInt(pages) : pages).keys()).map( + (page) => ( + handleOnClick(page + 1)} + variants={paginationMotion} + initial={'rest'} + animate={activePage === page + 1 ? 'active' : 'rest'}> + {page + 1} + + ), + )} +
+ +
+ ); +}; + +export default Pagination; diff --git a/src/styles/_pagination.scss b/src/styles/_pagination.scss new file mode 100644 index 0000000..6ca2c46 --- /dev/null +++ b/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); +} diff --git a/src/styles/style.scss b/src/styles/style.scss index fc8e8a8..06cffaa 100644 --- a/src/styles/style.scss +++ b/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';