分页

import { Pagination as BasePagination } from '@geist-ui/react';
import { PaginationProps } from '@geist-ui/react/dist/pagination/pagination';
import router from 'next/router';
import RightContainer from './rightcontainer';

export interface Props {
	page: number;
	count: number;
	limit: number;
}

/**
 * 分页
 */
export default function Pagination({ page, count, limit, ...rest }: Props & Omit<PaginationProps, 'initialPage' | 'limit' | 'count' | 'onChange' | 'size'>) {
	return <>
		<RightContainer>
			<BasePagination
				limit={limit}
				initialPage={page}
				count={count}
				onChange={async (vol) => {
					if (vol === page) {
						return;
					}
					const sp = new URLSearchParams(router.query as Record<string, string>);
					sp.set('page', vol.toString());
					location.assign(`${router.pathname}?${sp.toString()}`);
				}}
				{...rest}
			>
				<BasePagination.Previous>{'<'}</BasePagination.Previous>
				<BasePagination.Next>{'>'}</BasePagination.Next>
			</BasePagination>
		</RightContainer>
	</>;
}

import { ReactNode } from "react";

export default function RightContainer({ children }: { children: ReactNode; }) {
	return <><div className='c'>{children}</div>
		<style jsx>{`
.c{
margin-top: 2rem;
display: flex;
justify-content: flex-end;
}
`}</style>
	</>;
}