umwd-components 0.1.152 → 0.1.153

package/dist/cjs/components/PictureBarSection.js

@@ -10,6 +10,7 @@
 var React = require('react');
 var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
+var utils = require('../lib/utils.js');
 
 function PictureBarSection(_ref) {
   let {
@@ -18,9 +19,10 @@ function PictureBarSection(_ref) {
   const {
     pictures,
     maxWidth = "lg",
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
-  material.useTheme();
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth,
     sx: {
@@ -35,21 +37,34 @@ function PictureBarSection(_ref) {
     xs: 12
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
-      p: 2
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
-    direction: "row",
+    direction: {
+      xs: "column",
+      sm: "row"
+    },
     spacing: 2,
     justifyContent: "space-around"
-  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(material.Box, {
+    key: picture.id,
+    sx: {
+      flex: "1 1 0"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     src: picture.url,
     alt: picture.alternativeText,
-    width: 200,
-    height: 200,
+    width: picture.width,
+    height: picture.height,
     style: {
-      ...picture.style
+      ...picture.style,
+      width: "100%",
+      height: "auto"
     }
-  })))))));
+  }))))))));
 }
 
 exports.PictureBarSection = PictureBarSection;

package/dist/cjs/components/StrapiImage.js

@@ -14,8 +14,8 @@ function StrapiImage(_ref) {
   let {
     src,
     alt = "",
-    height = 500,
-    width = 500,
+    height,
+    width,
     style = {}
   } = _ref;
   if (!src) return null;

package/dist/esm/components/PictureBarSection.js

@@ -6,8 +6,9 @@
  */
   
 import React__default from 'react';
-import { useTheme, Container, Grid, Paper, Stack } from '@mui/material';
+import { useTheme, Container, Grid, Paper, Stack, Box } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
+import { setOpacity } from '../lib/utils.js';
 
 function PictureBarSection(_ref) {
   let {
@@ -16,9 +17,10 @@ function PictureBarSection(_ref) {
   const {
     pictures,
     maxWidth = "lg",
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
-  useTheme();
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth,
     sx: {
@@ -33,21 +35,34 @@ function PictureBarSection(_ref) {
     xs: 12
   }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
-      p: 2
+      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"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
+    direction: {
+      xs: "column",
+      sm: "row"
+    },
     spacing: 2,
     justifyContent: "space-around"
-  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(StrapiImage, {
+  }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(Box, {
+    key: picture.id,
+    sx: {
+      flex: "1 1 0"
+    }
+  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
     src: picture.url,
     alt: picture.alternativeText,
-    width: 200,
-    height: 200,
+    width: picture.width,
+    height: picture.height,
     style: {
-      ...picture.style
+      ...picture.style,
+      width: "100%",
+      height: "auto"
     }
-  })))))));
+  }))))))));
 }
 
 export { PictureBarSection };

package/dist/esm/components/StrapiImage.js

@@ -12,8 +12,8 @@ function StrapiImage(_ref) {
   let {
     src,
     alt = "",
-    height = 500,
-    width = 500,
+    height,
+    width,
     style = {}
   } = _ref;
   if (!src) return null;

package/package.json

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

package/src/components/PictureBarSection.tsx

@@ -1,22 +1,10 @@
 "use client";
 
 import React from "react";
-import {
-  Paper,
-  Typography,
-  Container,
-  Grid,
-  useTheme,
-  Button,
-  Stack,
-  Tooltip,
-} from "@mui/material";
+import { Paper, Container, Grid, useTheme, Stack, Box } 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";
+import { setOpacity } from "../lib/utils.ts";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -37,6 +25,7 @@ interface PictureBarSectionProps {
   pictures: { data: ImageProps[] };
   maxWidth: MaxWidth;
   sx?: SxProps<Theme>;
+  glass?: boolean;
 }
 
 export function PictureBarSection({
@@ -44,7 +33,7 @@ export function PictureBarSection({
 }: {
   readonly data: PictureBarSectionProps;
 }) {
-  const { pictures, maxWidth = "lg", sx = {} } = data;
+  const { pictures, maxWidth = "lg", sx = {}, glass = false } = data;
 
   const theme = useTheme();
 
@@ -52,23 +41,37 @@ export function PictureBarSection({
     <Container maxWidth={maxWidth} sx={{ my: 1, ...sx }}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
-          <Paper sx={{ p: 2 }}>
+          <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",
+            }}
+          >
             <Stack
-              direction={"row"}
+              direction={{ xs: "column", sm: "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,
-                    }}
-                  />
+                  <Box key={picture.id} sx={{ flex: "1 1 0" }}>
+                    <StrapiImage
+                      src={picture.url}
+                      alt={picture.alternativeText}
+                      width={picture.width}
+                      height={picture.height}
+                      style={{
+                        ...picture.style,
+                        width: "100%",
+                        height: "auto",
+                      }}
+                    />
+                  </Box>
                 ))}
             </Stack>
           </Paper>

package/src/components/StrapiImage.tsx

@@ -13,8 +13,8 @@ interface StrapiImageProps {
 export function StrapiImage({
   src,
   alt = "",
-  height = 500,
-  width = 500,
+  height,
+  width,
   style = {},
 }: Readonly<StrapiImageProps>) {
   if (!src) return null;