42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { Icon } from "components/Ico";
|
|
import { cJoin } from "helpers/className";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { Button } from "./Button";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props {
|
|
className?: string;
|
|
maxPage: number;
|
|
page: number;
|
|
setPage: Dispatch<SetStateAction<number>>;
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const PageSelector = ({
|
|
page,
|
|
setPage,
|
|
maxPage,
|
|
className,
|
|
}: Props): JSX.Element => (
|
|
<div className={cJoin("flex flex-row place-content-center", className)}>
|
|
<Button
|
|
onClick={() => setPage((current) => (page > 0 ? current - 1 : current))}
|
|
className="rounded-r-none"
|
|
icon={Icon.NavigateBefore}
|
|
/>
|
|
<Button className="rounded-none border-x-0" text={(page + 1).toString()} />
|
|
<Button
|
|
onClick={() =>
|
|
setPage((current) => (page < maxPage ? page + 1 : current))
|
|
}
|
|
className="rounded-l-none"
|
|
icon={Icon.NavigateNext}
|
|
/>
|
|
</div>
|
|
);
|