[feature]: Add a Pagination.jsx component

Is your feature request related to a problem? Please describe.

Yes and no.

Some of the items in /pages may need some form of pagination for displaying more than a few items, like Events, Groups and Friends.. which are part of our core, so make this semi-reusable between layouts, pages and components.

Describe the solution you would like

This should be elaborated upon, but it ideally should be something like this:

import { Box, Button } from '@mui/material';

const Pagination = ({
  currentPage,
  setCurrentPage,
  recordsPerPage,
  totalRecords,
}) => {
  const nPages = Math.ceil(totalRecords / recordsPerPage);

  const pageNumbers = [...Array(nPages + 1).keys()].slice(1);

  const nextPage = () => {
    if (currentPage !== nPages) setCurrentPage(currentPage + 1);
  };

  const prevPage = () => {
    if (currentPage !== 1) setCurrentPage(currentPage - 1);
  };

  return (
    <Box>
      <Button onClick={prevPage}>Prev</Button>
      {pageNumbers.map((number) => {
        return (
          <Button
            key={number}
            onClick={() => setCurrentPage(number)}
            variant={number === currentPage ? 'contained' : 'outlined'}
          >
            {number}
          </Button>
        );
      })}
      <Button onClick={nextPage}>Next</Button>
    </Box>
  );
};

export default Pagination;

Describe the alternatives you have tried

Some social media apps and sites are using some minor forms of pagination in various forms already, so it seems useful to help display many items.

Additional context

No response