coffee/components/products-grid/ProductsGrid.jsx

import { Button, Container, Grid } from '@mui/material';
import CircularProgress from '@mui/material/CircularProgress';
import { Box } from '@mui/system';
import Image from 'next/image';
import ProductCard from '../product-card/ProductCard';

const ProductsGrid = ({
  allProducts,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage,
}) => {
  const dataToDisplay = allProducts.pages.map((page) =>
    page.product.map((item) => (
      <Grid key={item._id} item md={4} sm={6} xs={12} sx={{ mb: '100px' }}>
        <ProductCard product={item} />
      </Grid>
    ))
  );

  return (
    <Container
      sx={{
        mt: 10,
      }}
    >
      <Grid container spacing={2}>
        {dataToDisplay}
      </Grid>
      <Box textAlign="center" mt={-5} mb={5}>
        {hasNextPage && (
          <Button
            onClick={fetchNextPage}
            startIcon={
              !isFetchingNextPage && (
                <Image
                  src="/images/arrow.svg"
                  alt="arrow down"
                  width={29}
                  height={29}
                />
              )
            }
            sx={{
              backgroundColor: 'primary.main',
              height: 50,
              width: 150,
              color: 'white',
              ':hover': {
                bgcolor: 'primary.main', // theme.palette.primary.main
                color: 'white',
              },
            }}
          >
            {isFetchingNextPage && (
              <CircularProgress
                style={{
                  color: '#fff',
                  width: '29px',
                  height: '29px',
                  marginRight: '20px',
                }}
              />
            )}
            {isFetchingNextPage
              ? 'Loading...'
              : hasNextPage
              ? 'Load More'
              : 'Nothing more to load'}
          </Button>
        )}
      </Box>
    </Container>
  );
};

export default ProductsGrid;