Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Typography } from '@mui/material';

export function Grid({
  items = [],
  renderItem = () => {},
  emptyMessage = '',
  keyExtractor = (item) => item,
  columns = 3,
  gap = 1,
  renderFooter
}) {
  if (!items || !items.length) {
    return <Typography>{emptyMessage}</Typography>;
  }

  return (
    <>
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: ({ spacing }) => ({
            xs: 'repeat(1, 1fr)',
            md: `repeat(auto-fill, calc(100% / ${columns} - ${spacing(gap)}))`
          }),
          gap
        }}
      >
        {items.map((item, index) => (
          <Box key={keyExtractor(item, index)}>{renderItem(item, index)}</Box>
        ))}
      </Box>
      {renderFooter && renderFooter()}
    </>
  );
}