119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import Paper from '@mui/material/Paper';
|
|
import LegalPage from './pages/LegalPage.js';
|
|
import CategoryBox from './components/CategoryBox.js';
|
|
|
|
const PrerenderCategoriesPage = ({ categoryData }) => {
|
|
// Helper function to recursively collect all categories from the tree
|
|
const collectAllCategories = (categoryNode, categories = [], level = 0) => {
|
|
if (!categoryNode) return categories;
|
|
|
|
// Add current category (skip root category 209)
|
|
if (categoryNode.id !== 209 && categoryNode.seoName) {
|
|
categories.push({
|
|
id: categoryNode.id,
|
|
name: categoryNode.name,
|
|
seoName: categoryNode.seoName,
|
|
level: level
|
|
});
|
|
}
|
|
|
|
// Recursively add children
|
|
if (categoryNode.children) {
|
|
for (const child of categoryNode.children) {
|
|
collectAllCategories(child, categories, level + 1);
|
|
}
|
|
}
|
|
|
|
return categories;
|
|
};
|
|
|
|
// The categoryData passed prop is the root tree (id: 209)
|
|
const rootTree = categoryData;
|
|
|
|
const renderLevel1Section = (l1Node) => {
|
|
// Collect all descendants (excluding the L1 node itself, which collectAllCategories would include first)
|
|
const descendants = collectAllCategories(l1Node).slice(1);
|
|
|
|
return (
|
|
<Paper
|
|
key={l1Node.id}
|
|
elevation={1}
|
|
sx={{
|
|
p: 2,
|
|
mb: 3,
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: 'row' },
|
|
alignItems: { xs: 'flex-start', md: 'flex-start' },
|
|
gap: 3
|
|
}}
|
|
>
|
|
{/* Level 1 Header/Box */}
|
|
<Box sx={{
|
|
minWidth: '150px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 1
|
|
}}>
|
|
<CategoryBox
|
|
id={l1Node.id}
|
|
name={l1Node.name}
|
|
seoName={l1Node.seoName}
|
|
sx={{
|
|
boxShadow: 4,
|
|
width: '150px',
|
|
height: '150px'
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Descendants area */}
|
|
<Box sx={{ flex: 1 }}>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 2
|
|
}}>
|
|
{descendants.map((cat) => (
|
|
<CategoryBox
|
|
key={cat.id}
|
|
id={cat.id}
|
|
name={cat.name}
|
|
seoName={cat.seoName}
|
|
sx={{
|
|
width: '100px',
|
|
height: '100px',
|
|
minWidth: '100px',
|
|
minHeight: '100px',
|
|
boxShadow: 1,
|
|
fontSize: '0.9rem'
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
const content = (
|
|
<Box>
|
|
<Box>
|
|
{rootTree && rootTree.children && rootTree.children.map((child) => (
|
|
renderLevel1Section(child)
|
|
))}
|
|
{(!rootTree || !rootTree.children || rootTree.children.length === 0) && (
|
|
<Typography>Keine Kategorien gefunden.</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
return <LegalPage title="Kategorien" content={content} />;
|
|
};
|
|
|
|
export default PrerenderCategoriesPage;
|