xxxxxxxxxx
// Example usage in another component
import React from 'react';
import ReusableGridWithPaper from './ReusableGridWithPaper';
const MyComponent: React.FC = () => {
const paperPropsList = [
{ elevation: 3 },
{ elevation: 3 },
{ elevation: 3 },
{ elevation: 3 },
];
return (
<div>
<h1>My Component</h1>
<ReusableGridWithPaper container spacing={2} paperPropsList={paperPropsList}>
{/* Additional content can be placed here if needed */}
</ReusableGridWithPaper>
</div>
);
};
export default MyComponent;
xxxxxxxxxx
// ReusableGridWithPaper.tsx
import React from 'react';
import { Grid, Paper, GridProps, PaperProps } from '@mui/material';
interface ReusableGridWithPaperProps extends GridProps {
paperPropsList: PaperProps[];
}
const ReusableGridWithPaper: React.FC<ReusableGridWithPaperProps> = (props) => {
const { paperPropsList, children, gridProps } = props;
return (
<Grid container spacing={2} {gridProps}>
{paperPropsList.map((paperProps, index) => (
<Grid key={index} item xs={12} sm={6} md={3}>
<Paper {paperProps}>
{/* Content for the Paper */}
{`Paper ${index + 1}`}
</Paper>
</Grid>
))}
</Grid>
);
};
export default ReusableGridWithPaper;