58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
export default function Pagination() {
|
|
const [activePage, setActivePage] = useState(1);
|
|
const totalPages = 3;
|
|
|
|
const handleClick = (page) => {
|
|
if (page >= 1 && page <= totalPages) {
|
|
setActivePage(page);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ul className="pagination">
|
|
<li className={`page-item ${activePage === 1 ? "disabled" : ""}`}>
|
|
<a
|
|
className="page-link"
|
|
onClick={() => handleClick(activePage - 1)}
|
|
aria-label="Previous"
|
|
>
|
|
<span aria-hidden="true">
|
|
<i className="uil uil-arrow-left before:content-['\e949']" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
{[...Array(totalPages)].map((_, index) => {
|
|
const page = index + 1;
|
|
return (
|
|
<li
|
|
key={page}
|
|
className={`page-item ${activePage === page ? "active" : ""}`}
|
|
>
|
|
<a className="page-link" onClick={() => handleClick(page)}>
|
|
{page}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
|
|
<li
|
|
className={`page-item ${activePage === totalPages ? "disabled" : ""}`}
|
|
>
|
|
<a
|
|
className="page-link"
|
|
onClick={() => handleClick(activePage + 1)}
|
|
aria-label="Next"
|
|
>
|
|
<span aria-hidden="true">
|
|
<i className="uil uil-arrow-right before:content-['\e94c']" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
);
|
|
}
|