Конечно! Чтобы реализовать пагинацию для вашего блога, вам нужно обновить компонент `Blog` так, чтобы он управлял состоянием текущей страницы, и передавать этот статус в компонент `Pagination`. Затем, при переключении страниц, вы будете загружать соответствующий контент.
Вот пример, как это можно сделать:
### 1. Обновите `Blog.jsx`:
```javascript
import React, { useState } from "react";
import Pagination from "../Components/Pagination";
// Импортируем все страницы блога
const BlogPages = Array.from({ length: 100 }, (_, i) => {
return require(`./BlogPages/${i + 1}.jsx`).default;
});
const Blog = () => {
const [currentPage, setCurrentPage] = useState(1);
const handlePageChange = (page) => {
setCurrentPage(page);
};
const CurrentBlogPost = BlogPages[currentPage - 1]; // Индексы страниц начинаются с 0
return (
<div>
<div>
<CurrentBlogPost />
</div>
<div className="max-w-[1240px] mx-auto py-3 px-[5px]">
<Pagination
currentPage={currentPage}
onPageChange={handlePageChange}
pageCount={BlogPages.length}
/>
</div>
</div>
);
}
export default Blog;
```
### 2. Обновите `Pagination.jsx`:
Теперь вам нужно передать текущую страницу и функцию смены страницы в `Pagination`, а также обработать логику изменения страницы:
```javascript
import React from "react";
import ReactPaginate from 'react-paginate';
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
const Pagination = ({ currentPage, onPageChange, pageCount }) => {
const handlePageClick = (data) => {
const selectedPage = data.selected + 1; // react-paginate возвращает индекс, начиная с 0
onPageChange(selectedPage);
};
return (
<div>
<ReactPaginate
pageCount={pageCount}
onPageChange={handlePageClick}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
breakLabel={<span className="mr-2 sm:mr-4">...</span>}
nextLabel={
<span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
<BsChevronRight />
</span>
}
previousLabel={
<span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
<BsChevronLeft />
</span>
}
containerClassName={'flex space-x-2'}
pageClassName={'w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md cursor-pointer'}
activeClassName={'bg-blue-500 text-white'}
disabledClassName={'opacity-50 cursor-not-allowed'}
/>
</div>
);
}
export default Pagination;
```
### Объяснение:
1. **Импорт контента:** В `Blog.jsx` мы создаем массив `BlogPages`, который содержит все импорты страниц блога от `1.jsx` до `100.jsx`. Используем метод `require`, чтобы динамически загружать компоненты.
2. **Состояние текущей страницы:** Мы используем `useState` для хранения текущей страницы. По умолчанию это `1`.
3. **Обновление страницы:** Функция `handlePageChange` обновляет состояние текущей страницы при клике на пагинацию.
4. **Передача свойств в `Pagination`:** Мы передаем текущее состояние страницы, функцию для изменения страницы и общее количество страниц в компонент `Pagination`.
5. **Обработка кликов:** В `Pagination.jsx` мы обрабатываем клики по страницам через `handlePageClick`, который изменяет текущую страницу с учетом того, что элемент `selected` возвращает индекс, начиная с 0.
Теперь вы сможете переключаться между страницами блога, и контент будет обновляться в соответствии с выбранной страницей.