62 lines
3.1 KiB
JavaScript
62 lines
3.1 KiB
JavaScript
import Button from "./Button";
|
|
import tw, { styled } from "twin.macro"
|
|
import "styled-components/macro"
|
|
|
|
function CustomBtn({children, setPage, currentPage, page, css, ...props}){
|
|
console.log(css)
|
|
return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
|
|
}
|
|
|
|
export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
|
|
|
|
function RenderButtons() {
|
|
switch (maxPages) {
|
|
case 1:
|
|
return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
|
|
case 2:
|
|
return <>
|
|
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
|
|
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
|
|
</>
|
|
case 3:
|
|
return <>
|
|
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
|
|
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
|
|
</>
|
|
case 4:
|
|
return <>
|
|
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
|
|
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
|
|
</>
|
|
case 5:
|
|
return <>
|
|
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
|
|
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
|
|
</>
|
|
default: {
|
|
return <>
|
|
{currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}><</CustomBtn>}
|
|
<CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
|
|
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
|
|
{(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
|
|
{(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
|
|
{(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>></CustomBtn>}
|
|
</>
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div {...props}>
|
|
<RenderButtons />
|
|
</div>
|
|
)
|
|
} |