Rev 3528 | AutorÃa | Ultima modificación | Ver Log |
import React from 'react';
import { Box, Typography } from '@mui/material';
export function Grid({
items = [],
renderItem = () => {},
emptyMessage = '',
keyExtractor = (item) => item,
autoFit = true,
minWidth = 200,
maxWidth = 250,
columns = 3,
gap = 1
}) {
if (!items.length) {
return <Typography>{emptyMessage}</Typography>;
}
return (
<Box
sx={{
display: 'grid',
gridTemplateColumns: autoFit
? `repeat(auto-fit, minmax(${minWidth}px, ${maxWidth}px))`
: `repeat(${columns}, 1fr)`,
gap
}}
>
{items.map((item, index) => (
<Box key={keyExtractor(item, index)}>{renderItem(item, index)}</Box>
))}
</Box>
);
}