Open CHRIBUR0309 opened 1 month ago
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.
Sorry, no example.
Tailwind Grid Generator
I want the UI layout above with MUI.
Search keywords: bento
Oh, I forgot the gap prop....
gap
This would provide extreme versatility. +1
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....
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