5.8 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars

Chuyển trang :)))

C:\Users\Administrator\Desktop\pro\components\CarPagination.tsx

import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';
import { PaginationRenderItemParams } from '@material-ui/lab';
import Link from 'next/link';
import { ParsedUrlQuery } from 'querystring';
import { forwardRef } from 'react';
import { useRouter } from 'next/router';
import  getAsString  from '../getAsString';
export default function CarPagination({ totalPages }: { totalPages: number }) {
  const { query } = useRouter();
  return (
    <Pagination
      page={parseInt(getAsString(query.page) || '1')}
      count={totalPages}
      renderItem={(item) => (
        <PaginationItem
          component={MaterialUiLink}
          query={query}
          item={item}
          {...item}
        />
      )}
    />
  );
}
export interface MaterialUiLinkProps {
  item: PaginationRenderItemParams;
  query: ParsedUrlQuery;
}
const MaterialUiLink = forwardRef<HTMLAnchorElement, MaterialUiLinkProps>(
  ({ item, query, ...props }, ref) => (
    <Link href={{ pathname: '/cars', query: { ...query, page: item.page }}} shallow>
      <a {...props} ref={ref}></a>
    </Link>
  )
);