File name
Commit message
Commit date
2023-02-27
File name
Commit message
Commit date
2023-02-27
import React from "react";
import styled from "styled-components";
export default function Pagination({ total, limit, page, setPage }) {
const numPages = Math.ceil(total / limit);
return (
<>
<Paging>
<button onClick={() => setPage(page - 1)} disabled={page === 1}><</button>
{Array(numPages).fill().map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)} aria-current={page === i + 1 ? "page" : null} className={page === i + 1 ? "PagingBtn" : null}> {i + 1} </button>
))}
<button onClick={() => setPage(page + 1)} disabled={page === numPages}>></button>
</Paging>
</>
);
}
const Paging = styled.div`
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin: 16px;
`;