umwd-components 0.1.150 → 0.1.152

package/dist/cjs/components/Page.js

@@ -20,6 +20,7 @@ var ColumnsSection = require('./ColumnsSection.js');
 var material = require('@mui/material');
 var ContactForm = require('./ContactForm.js');
 var PersonaliaSection = require('./PersonaliaSection.js');
+var PictureBarSection = require('./PictureBarSection.js');
 
 function blockRenderer(block, index) {
   switch (block.__component) {
@@ -63,6 +64,11 @@ function blockRenderer(block, index) {
         key: index,
         data: block
       });
+    case "layout.picture-bar-section":
+      return /*#__PURE__*/React.createElement(PictureBarSection.PictureBarSection, {
+        key: index,
+        data: block
+      });
     default:
       return null;
   }

package/dist/cjs/components/PictureBarSection.js

@@ -0,0 +1,55 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('./StrapiImage.js');
+
+function PictureBarSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    pictures,
+    maxWidth = "lg",
+    sx = {}
+  } = data;
+  material.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "space-around"
+  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    src: picture.url,
+    alt: picture.alternativeText,
+    width: 200,
+    height: 200,
+    style: {
+      ...picture.style
+    }
+  })))))));
+}
+
+exports.PictureBarSection = PictureBarSection;

package/dist/esm/components/Page.js

@@ -16,6 +16,7 @@ import { ColumnsSection } from './ColumnsSection.js';
 import { Box } from '@mui/material';
 import ContactForm from './ContactForm.js';
 import { PersonaliaSection } from './PersonaliaSection.js';
+import { PictureBarSection } from './PictureBarSection.js';
 
 function blockRenderer(block, index) {
   switch (block.__component) {
@@ -59,6 +60,11 @@ function blockRenderer(block, index) {
         key: index,
         data: block
       });
+    case "layout.picture-bar-section":
+      return /*#__PURE__*/React__default.createElement(PictureBarSection, {
+        key: index,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/PictureBarSection.js

@@ -0,0 +1,53 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default from 'react';
+import { useTheme, Container, Grid, Paper, Stack } from '@mui/material';
+import { StrapiImage } from './StrapiImage.js';
+
+function PictureBarSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    pictures,
+    maxWidth = "lg",
+    sx = {}
+  } = data;
+  useTheme();
+  return /*#__PURE__*/React__default.createElement(Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "space-around"
+  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(StrapiImage, {
+    src: picture.url,
+    alt: picture.alternativeText,
+    width: 200,
+    height: 200,
+    style: {
+      ...picture.style
+    }
+  })))))));
+}
+
+export { PictureBarSection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.150",
+  "version": "0.1.152",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Footer.js

@@ -167,7 +167,6 @@ function Footer({
                           size="large"
                         >
                           {Icon !== null && <Icon />}
-                          {/* {company_social.icon} */}
                         </IconButton>
                       );
                     })}

package/src/components/Page.js

@@ -11,6 +11,7 @@ import { ColumnsSection } from "./ColumnsSection.tsx";
 import { Box } from "@mui/material";
 import ContactForm from "./ContactForm.tsx";
 import { PersonaliaSection } from "./PersonaliaSection.tsx";
+import { PictureBarSection } from "./PictureBarSection.tsx";
 
 function blockRenderer(block, index) {
   switch (block.__component) {
@@ -30,6 +31,8 @@ function blockRenderer(block, index) {
       return <ColumnsSection key={index} data={block} />;
     case "layout.personalia-section":
       return <PersonaliaSection key={index} data={block} />;
+    case "layout.picture-bar-section":
+      return <PictureBarSection key={index} data={block} />;
 
     default:
       return null;

package/src/components/PictureBarSection.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import {
+  Paper,
+  Typography,
+  Container,
+  Grid,
+  useTheme,
+  Button,
+  Stack,
+  Tooltip,
+} from "@mui/material";
+import { StrapiImage } from "./StrapiImage.tsx";
+import { Email, LinkedIn } from "@mui/icons-material";
+import { BlockRendererClient } from "./BlockRendererClient.tsx";
+import { type BlocksContent } from "@strapi/blocks-react-renderer";
+import { MuiLink } from "./MuiLink.tsx";
+import { SxProps, Theme } from "@mui/material/styles";
+
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+}
+
+interface PictureBarSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  pictures: { data: ImageProps[] };
+  maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
+}
+
+export function PictureBarSection({
+  data,
+}: {
+  readonly data: PictureBarSectionProps;
+}) {
+  const { pictures, maxWidth = "lg", sx = {} } = data;
+
+  const theme = useTheme();
+
+  return (
+    <Container maxWidth={maxWidth} sx={{ my: 1, ...sx }}>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Paper sx={{ p: 2 }}>
+            <Stack
+              direction={"row"}
+              spacing={2}
+              justifyContent={"space-around"}
+            >
+              {pictures.data &&
+                pictures.data.map((picture) => (
+                  <StrapiImage
+                    src={picture.url}
+                    alt={picture.alternativeText}
+                    width={200}
+                    height={200}
+                    style={{
+                      ...picture.style,
+                    }}
+                  />
+                ))}
+            </Stack>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

package/src/stories/Page.stories.js

@@ -210,6 +210,27 @@ AMH.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.picture-bar-section",
+      title: "Pictures",
+      pictures: [
+        {
+          id: 1,
+          url: "/uploads/CHALLENGER_604_efe6e0309f.png",
+          alt: "Challenger 604 Floor Plan",
+          width: 1000,
+          height: 282,
+        },
+        {
+          id: 2,
+          url: "/uploads/BEECHCRAFT_KING_AIR_200_828251b91c.png",
+          alt: "Challenger 604 Floor Plan",
+          width: 1000,
+          height: 233,
+        },
+      ],
+    },
     {
       id: 2,
       __component: "layout.features-section",