umwd-components 0.1.834 → 0.1.836

package/dist/esm/src/components/page-builder/PageBuilder.js

@@ -0,0 +1,94 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Alert from '@mui/material/Alert';
+import { PBTextImageSection } from './PBTextImageSection.js';
+import { PBHeroSection } from './PBHeroSection.js';
+import { PBFeatureSection } from './PBFeaturesSection.js';
+import { PBFleetSection } from './PBFleetSection.js';
+import { PBIconSection } from './PBIconSection.js';
+import { PBColumnsSection } from './PBColumnsSection.js';
+import { PBPersonaliaSection } from './PBPersonaliaSection.js';
+import { PBPictureBarSection } from './PBPictureBarSection.js';
+import { PBLogoBarSection } from './PBLogoBarSection.js';
+import { useActionState } from 'react';
+import { updatePageAction } from '../../data/actions/pagebuilder-actions.js';
+import { SubmitButton } from '../SubmitButton.js';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { ExplanatoryFoldOut } from '../ExplanatoryFoldOut.js';
+import { useTheme } from '@mui/material/styles';
+import MarkdownEditor from '../common/markdown/MarkdownEditor.js';
+import { PBProductBlock } from './PBProductBlock.js';
+import { PBCategoryBlock } from './PBCategoryBlock.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function blockRenderer(block, index) {
+    switch (block.__component) {
+        case "page-elements.hero-section":
+            return (jsx(PBHeroSection, { data: block, index: index }, block.id + block.__component));
+        case "page-elements.features-section":
+            return (jsx(PBFeatureSection, { data: block, index: index }, block.id + block.__component));
+        /* case "page-elements.contact-section":
+          return (
+            <PBContactForm
+              key={block.id + block.__component}
+              data={block}
+              index={index}
+            />
+          ); */
+        case "page-elements.text-image-section":
+            return (jsx(PBTextImageSection, { data: block }, block.id + block.__component));
+        case "page-elements.icon-section":
+            return jsx(PBIconSection, { data: block }, block.id + block.__component);
+        case "page-elements.fleet-section":
+            return jsx(PBFleetSection, { data: block }, block.id + block.__component);
+        case "page-elements.columns-section":
+            return (jsx(PBColumnsSection, { data: block }, block.id + block.__component));
+        case "page-elements.personalia-section":
+            return (jsx(PBPersonaliaSection, { data: block, index: index }, block.id + block.__component));
+        case "page-elements.picture-bar-section":
+            return (jsx(PBPictureBarSection, { data: block }, block.id + block.__component));
+        case "page-elements.logo-bar-section":
+            return (jsx(PBLogoBarSection, { data: block }, block.id + block.__component));
+        case "page-elements.product-block":
+            return (jsx(PBProductBlock, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.category-block":
+            return (jsx(PBCategoryBlock, { data: block, index: index }, `${block.id}-${block.__component}`));
+        default:
+            return null;
+    }
+}
+function PageBuilder({ data, }) {
+    console.log(data);
+    const { id, title, description, blocks, maxWidth = "lg", sx = [] } = data;
+    if (!blocks) {
+        return jsx("p", { children: "No sections found" });
+    }
+    const theme = useTheme();
+    const [formState, formAction] = useActionState(updatePageAction, INITIAL_STATE);
+    return (jsx(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs("form", { action: formAction, children: [jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1 }, children: jsxs(Stack, { spacing: 2, sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: [jsx(ExplanatoryFoldOut, { title: "title and description", description: "Edit the title and description of your pages. Even if it's not shown on the website it is important for SEO" }), jsx(TextField, { id: "title", name: "title", label: "title", defaultValue: title, variant: "outlined", error: formState?.zodErrors?.title != undefined ? true : false, helperText: formState?.zodErrors?.title }), jsx(MarkdownEditor, { name: "description", label: "description", defaultValue: description })] }) }), jsx(Box, { sx: [
+                        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+                        ...(Array.isArray(sx) ? sx : [sx]),
+                    ], children: blocks.map(blockRenderer) }), jsxs(Stack, { direction: "row-reverse", spacing: 2, alignItems: "center", sx: {
+                        py: 1,
+                    }, children: [jsx(SubmitButton, { text: "save changes", loadingText: "loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message && (jsx(Alert, { severity: "success", children: formState?.message }))] })] }) }));
+}
+
+export { PageBuilder as default };

package/dist/esm/src/components/page-elements/CategoryBlock.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+import ProductCard from '../e-commerce/products/ProductCard.js';
+import MarkdownDisplay from '../common/markdown/MarkdownDisplay.js';
+
+function CategoryBlock({ data }) {
+    const { maxWidth = "lg", sx = {}, glass = false, previewAmount = 3 } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                        p: 2,
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h4", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: data.category.title }), data.category?.description &&
+                                typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
+                                            .slice(0, previewAmount)
+                                            .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }));
+}
+
+export { CategoryBlock };

package/dist/esm/src/components/page-elements/ColumnsSection.js

@@ -0,0 +1,45 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import getIcon from '../../lib/getIcon.js';
+
+function ColumnsSection({ data, }) {
+    const { column, maxWidth, sx = [] } = data;
+    // TODO make suitable for multiple column layouts
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(Grid, { container: true, spacing: 2, children: column.map((column, index) => {
+                const Icon = getIcon(column.icon);
+                return (jsx(Grid, { size: {
+                        xs: 12,
+                        md: 6,
+                    }, children: jsxs(Paper, { sx: { p: 2, height: "100%" }, children: [jsxs(Typography, { variant: "h5", sx: {
+                                    mb: 2,
+                                    display: "flex",
+                                    justifyContent: "flex-start",
+                                    alignItems: "center",
+                                }, children: [Icon !== null && (jsx(Icon, { sx: {
+                                            mr: 2,
+                                            mt: 0.2,
+                                            width: "50px",
+                                            height: "50px",
+                                            fill: "currentColor",
+                                            stroke: "none",
+                                        } })), column.heading] }), 
+                            /* column.textV2 ? (
+                            <BlockRendererClient content={column.textV2} />
+                          ) : */ jsx(Typography, { children: column.text })] }) }, `${column.id}-${index}`));
+            }) }) }));
+}
+
+export { ColumnsSection };

package/dist/esm/src/components/page-elements/FeaturesSection.js

@@ -0,0 +1,57 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import getIcon from '../../lib/getIcon.js';
+import { useTheme } from '@mui/material/styles';
+
+const MuiMarkdown = React.lazy(() => import(/* webpackChunkName: "mui-markdown" */ 'mui-markdown'));
+function FeatureSection({ data, }) {
+    const { feature, maxWidth, sx = [], anchor = "" } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, id: anchor, children: jsx(Stack, { spacing: 2, direction: "row", justifyContent: "stretch", flexWrap: "wrap", sx: {
+                width: "100%",
+                [theme.breakpoints.up("xs")]: {
+                    flexDirection: "column",
+                },
+                [theme.breakpoints.up("sm")]: {
+                    flexDirection: "row",
+                },
+            }, useFlexGap: true, children: feature &&
+                feature.map((feature, index) => {
+                    const Icon = getIcon(feature.icon);
+                    return (jsx(Card, { id: feature.anchor || "", sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "space-between",
+                            flex: 1,
+                            minWidth: 275,
+                        }, children: jsxs(CardContent, { children: [jsx(Box, { sx: {
+                                        height: 100,
+                                        display: "grid",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    }, children: Icon !== null && (jsx(Icon, { sx: {
+                                            mr: 2,
+                                            mt: 0.2,
+                                            width: "75px",
+                                            height: "75px",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            strokeWidth: 0.5,
+                                        } })) }), jsx(Typography, { variant: "h5", align: "center", component: "div", sx: { mb: 2, height: "4rem" }, children: feature.heading }), jsx(Typography, { variant: "h6", align: "center", component: "div", sx: { mb: 2, height: "4rem" }, children: feature.subHeading }), feature.text && jsx(MuiMarkdown, { children: feature.text })] }) }, `${feature.id}-${index}`));
+                }) }) }));
+}
+
+export { FeatureSection };

package/dist/esm/src/components/page-elements/FleetSection.js

@@ -0,0 +1,66 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Paper from '@mui/material/Paper';
+import { StrapiImage } from '../StrapiImage.js';
+import RadarIcon from '@mui/icons-material/Radar';
+import SpeedIcon from '@mui/icons-material/Speed';
+import HeightIcon from '@mui/icons-material/Height';
+import { useTheme } from '@mui/material/styles';
+
+function FleetSection({ data }) {
+    const { airplane, maxWidth, sx = {} } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1 }, children: jsx(Stack, { spacing: 2, direction: "row", justifyContent: "stretch", flexWrap: "wrap", sx: {
+                width: "100%",
+                [theme.breakpoints.up("xs")]: {
+                    flexDirection: "column",
+                },
+                [theme.breakpoints.up("sm")]: {
+                    flexDirection: "row",
+                },
+            }, useFlexGap: true, children: airplane.map((airplane, index) => (jsxs(Card, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    flex: 1,
+                    minWidth: 275,
+                }, children: [jsx(CardHeader, { title: airplane.name, subheader: airplane.description }), jsx(Box, { sx: { flex: 1 } }), jsx(CardContent, { sx: {
+                            p: 1,
+                            height: 180,
+                            mb: 2,
+                        }, children: jsxs(Paper, { sx: {
+                                p: 1,
+                                display: "grid",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "100%",
+                                position: "relative",
+                            }, variant: "outlined", children: [airplane.floorplan !== null && (jsx(StrapiImage, { id: airplane.floorplan.id?.toString(), url: airplane.floorplan.url, alternativeText: airplane.floorplan.alternativeText, width: airplane.floorplan.width, height: airplane.floorplan.height, style: {
+                                        objectFit: "contain",
+                                        width: "100%",
+                                        paddingBottom: "20px",
+                                    } })), airplane.cabinHeight &&
+                                    airplane.cabinWidth &&
+                                    airplane.cabinLength && (jsx(Box, { sx: {
+                                        position: "absolute",
+                                        right: ".5rem",
+                                        bottom: ".5rem",
+                                    }, children: jsxs(Typography, { variant: "body2", color: "text.secondary", align: "right", children: [jsx("strong", { children: "Cabin Dimensions:" }), " ", jsx("strong", { children: "H" }), " ", airplane.cabinHeight, " m ", jsx("strong", { children: "W" }), " ", airplane.cabinWidth, " m ", jsx("strong", { children: "L" }), " ", airplane.cabinLength, " m"] }) }))] }) }), jsx(CardContent, { sx: {
+                        /*  height: "33%" */
+                        }, children: jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [jsx(Chip, { label: `Range: ${airplane.range} km`, variant: "filled", color: "primary", icon: jsx(RadarIcon, {}) }), jsx(Chip, { label: `Speed: ${airplane.speed} km/h`, variant: "filled", color: "primary", icon: jsx(SpeedIcon, {}) }), jsx(Chip, { label: `Ceiling: ${airplane.ceiling} ft`, variant: "filled", color: "primary", icon: jsx(HeightIcon, {}) })] }) })] }, `${airplane.id}-${index}`))) }) }));
+}
+
+export { FleetSection };

package/dist/esm/src/components/page-elements/HeroSectionV2.js

@@ -0,0 +1,36 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+
+function HeroSection({ data }) {
+    const { heading, subHeading, bgImage, logoImage, link, maxWidth, sx = {}, glass = false, } = data;
+    useTheme();
+    // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { zIndex: 1 }, children: jsx(Paper, { sx: [
+                { padding: 5 },
+                bgImage?.url !== undefined && {
+                    backgroundImage: `url(${process.env.NEXT_PUBLIC_STRAPI_URL}${bgImage.url})`,
+                    backgroundSize: "cover",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center",
+                },
+            ], children: jsxs(Stack, { spacing: 3, alignItems: "center", justifyContent: "center", children: [logoImage && logoImage.url !== null && (jsx(StrapiImage, { id: logoImage.id?.toString(), alternativeText: logoImage.alternativeText || "logoImage", height: logoImage.height || 100, url: logoImage.url, width: logoImage.width || 100, style: {
+                            objectFit: "contain",
+                            filter: "invert(1)",
+                        } })), jsx(Typography, { variant: "h2", align: "center", component: "h1", children: heading }), jsx(Typography, { variant: "h4", align: "center", component: "h2", children: subHeading }), link && link.url && (jsx(Link, { href: link.url, children: jsx(Button, { variant: "contained", sx: { width: "100%", fontSize: "1.5rem" }, children: link.text }) }))] }) }) }));
+}
+
+export { HeroSection };

package/dist/esm/src/components/page-elements/IconSection.js

@@ -0,0 +1,38 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import getIcon from '../../lib/getIcon.js';
+
+function IconSection({ data }) {
+    const { icon, maxWidth, sx = {} } = data;
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: icon.map((icon, index) => {
+                const Icon = getIcon(icon.icon);
+                return (jsx(Grid, { size: {
+                        xs: 12,
+                        sm: 6,
+                        md: 4,
+                        lg: 3,
+                    }, children: jsx(Card, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            height: "100%",
+                        }, children: jsxs(CardContent, { children: [jsxs(Typography, { variant: "h6", component: "div", sx: {
+                                        display: "flex",
+                                        justifyContent: "start",
+                                        alignItems: "start",
+                                        minHeight: "4.2rem",
+                                    }, children: [Icon !== null && jsx(Icon, { sx: { mr: 2, mt: 0.2 } }), icon.title] }), jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", children: icon.text })] }) }) }, `${icon.id}-${index}`));
+            }) }) }));
+}
+
+export { IconSection };

package/dist/esm/src/components/page-elements/LogoBarSection.js

@@ -0,0 +1,48 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+import { StyledLink } from '../StyledLink.js';
+
+function LogoBarSection({ data, }) {
+    const { companies, maxWidth = "lg", sx = {}, glass = false } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                        p: 2,
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", children: companies &&
+                            companies.map((company, index) => (jsxs(StyledLink, { href: company.url, sx: {
+                                    flex: "1 1 0",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    paddingBottom: "1rem",
+                                    transform: "scale(.9)",
+                                    transition: ".2s",
+                                    "&:hover": {
+                                        transform: "scale(1)",
+                                    },
+                                }, children: [jsx(StrapiImage, { id: company.logo.id.toString(), url: company.logo.url, alternativeText: company.logo.alternativeText, width: company.logo.width, height: company.logo.height, style: {
+                                            ...company.logo.style,
+                                            width: "120px",
+                                            height: "120px",
+                                            objectFit: "contain",
+                                            paddingBottom: "1rem",
+                                        } }), company.name] }, `${company.id}-${index}`))) }) }) }) }) }));
+}
+
+export { LogoBarSection };

package/dist/esm/src/components/page-elements/Page.js

@@ -0,0 +1,65 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TextImageSection } from './TextImageSection.js';
+import { HeroSection } from './HeroSectionV2.js';
+import { FeatureSection } from './FeaturesSection.js';
+import { FleetSection } from './FleetSection.js';
+import { IconSection } from './IconSection.js';
+import { ColumnsSection } from './ColumnsSection.js';
+import Box from '@mui/material/Box';
+import { PersonaliaSection } from './PersonaliaSection.js';
+import { PictureBarSection } from './PictureBarSection.js';
+import { LogoBarSection } from './LogoBarSection.js';
+import { ProductBlock } from './ProductBlock.js';
+import { CategoryBlock } from './CategoryBlock.js';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+
+function blockRenderer(block) {
+    switch (block.__component) {
+        case "page-elements.hero-section":
+            return (jsx(HeroSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.features-section":
+            return (jsx(FeatureSection, { data: block }, `${block.id}-${block.__component}`));
+        /* case "page-elements.contact-section":
+          return (
+            <ContactForm key={`${block.id}-${block.__component}`} data={block} />
+          ); */
+        case "page-elements.text-image-section":
+            return (jsx(TextImageSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.icon-section":
+            return (jsx(IconSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.fleet-section":
+            return (jsx(FleetSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.columns-section":
+            return (jsx(ColumnsSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.personalia-section":
+            return (jsx(PersonaliaSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.picture-bar-section":
+            return (jsx(PictureBarSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.logo-bar-section":
+            return (jsx(LogoBarSection, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.product-block":
+            return (jsx(ProductBlock, { data: block }, `${block.id}-${block.__component}`));
+        case "page-elements.category-block":
+            return (jsx(CategoryBlock, { data: block }, `${block.id}-${block.__component}`));
+        default:
+            return null;
+    }
+}
+function Page({ title, description, blocks, sx = [] }) {
+    if (!blocks) {
+        return jsx("p", { children: "No sections found" });
+    }
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h1", align: "center", children: title }), jsx(Typography, { variant: "body1", align: "center", children: description })] }), blocks.map(blockRenderer)] }));
+}
+
+export { Page };