u

src/components/panels/PanelTile.jsx

@@ -0,0 +1,56 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { GRID_COLUMNS, panelTilePaperSx } from './panelTileLayout';
+
+export class PanelTile extends Component {
+  renderTitle() {
+    const { title } = this.props;
+    if (!title) return null;
+    return (
+      <Typography
+        variant="overline"
+        color="text.secondary"
+        sx={{ display: 'block', mb: 1 }}
+      >
+        {title}
+      </Typography>
+    );
+  }
+
+  render() {
+    const { wide = 1, children, sx, minHeight = 120 } = this.props;
+
+    return (
+      <Paper
+        variant="outlined"
+        sx={panelTilePaperSx({ wide, sx, minHeight })}
+      >
+        {this.renderTitle()}
+        <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+      </Paper>
+    );
+  }
+}
+
+export function PanelTileGrid({ children, sx }) {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'repeat(2, 1fr)',
+          md: `repeat(${GRID_COLUMNS}, 1fr)`,
+        },
+        gap: 2,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export { GRID_COLUMNS };