Genesis

src/components/CategoryBoxGrid.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import CategoryBox from './CategoryBox.js';
+
+// @note SwashingtonCP font is now loaded globally via index.css
+
+const CategoryBoxGrid = ({ 
+  categories = [], 
+  title, 
+  spacing = 3,
+  showTitle = true,
+  titleVariant = 'h3',
+  titleSx = {},
+  gridProps = {},
+  boxProps = {}
+}) => {
+  if (!categories || categories.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box>
+      {/* Optional title */}
+      {showTitle && title && (
+        <Typography 
+          variant={titleVariant}
+          component="h1" 
+          sx={{ 
+            mb: 4, 
+            fontFamily: 'SwashingtonCP',
+            color: 'primary.main',
+            textAlign: 'center',
+            ...titleSx
+          }}
+        >
+          {title}
+        </Typography>
+      )}
+      
+      {/* Category boxes grid */}
+      <Grid container spacing={spacing} sx={{ mt: showTitle && title ? 0 : 2, ...gridProps.sx }} {...gridProps}>
+        {categories.map((category) => (
+          <Grid 
+            item
+            xs={12}
+            sm={6}
+            md={4}
+            lg={3}
+            key={category.id} 
+          >
+            <CategoryBox
+              id={category.id}
+              name={category.name}
+              seoName={category.seoName}
+              image={category.image}
+              bgcolor={category.bgcolor}
+              {...boxProps}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default CategoryBoxGrid;