[material-ui] Add Bento Grid component

[CHRIBUR0309]

Summary

I suggest you make a bento ui component with MUI.

I just started using MUI several days ago and I'm not good at using it. So, the code below is mainly written by ChatGPT-4o (I rewrote a few lines). There might be some mistakes....

import { FC, ReactNode } from 'react';
import {
  Grid,
  Box,
  type SxProps,
  type Theme,
} from '@mui/material';

export type BentoItemProps = {
  gridArea: string;
  children: ReactNode;
  sx?: SxProps<Theme>;
}

export const BentoItem: FC<BentoItemProps> = ({ children, gridArea, sx }) => (
  <Box sx={{ ...sx, gridArea }}>
    {children}
  </Box>
);

export type BentoGridProps = {
  layout: string;
  children: ReactNode;
  sx?: SxProps<Theme>;
}

export const BentoGrid: FC<BentoGridProps> = ({ layout, children, sx }) => (
  <Box sx={{
    ...sx,
    display: 'grid',
    gridTemplateAreas: layout,
  }}>
    {children}
  </Box>
);

If the bento ui doesn't match the Material Design Systems, you can ignore this suggestion.

Examples

Sorry, no example.

Motivation

Tailwind Grid Generator

I want the UI layout above with MUI.

Search keywords: bento

[CHRIBUR0309]

Oh, I forgot the gap prop....

[TheOneTheOnlyJJ]

This would provide extreme versatility. +1