umwd-components 0.1.156 → 0.1.158

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/components/PersonaliaSection.js +4 -2
  2. package/dist/cjs/components/StrapiImage.js +2 -0
  3. package/dist/cjs/components/TextImageSection.js +83 -30
  4. package/dist/esm/components/PersonaliaSection.js +4 -2
  5. package/dist/esm/components/StrapiImage.js +2 -0
  6. package/dist/esm/components/TextImageSection.js +85 -32
  7. package/package.json +1 -1
  8. package/src/components/PersonaliaSection.tsx +2 -0
  9. package/src/components/StrapiImage.tsx +3 -0
  10. package/src/components/TextImageSection.tsx +144 -6
package/dist/cjs/components/PersonaliaSection.js CHANGED
@@ -101,13 +101,15 @@ function PersonaliaSection(_ref) {
101
101
  variant: "outlined",
102
102
  startIcon: /*#__PURE__*/React.createElement(iconsMaterial.LinkedIn, null),
103
103
  href: partner.linkedIn,
104
- target: "_blank"
104
+ target: "_blank",
105
+ color: "secondary"
105
106
  }, "LinkedIn"), partner.email && /*#__PURE__*/React.createElement(material.Tooltip, {
106
107
  title: "".concat(partner.email)
107
108
  }, /*#__PURE__*/React.createElement(material.Button, {
108
109
  variant: "outlined",
109
110
  startIcon: /*#__PURE__*/React.createElement(iconsMaterial.Email, null),
110
- href: "mailto:".concat(partner.email)
111
+ href: "mailto:".concat(partner.email),
112
+ color: "secondary"
111
113
  }, "Email")))))));
112
114
  })));
113
115
  }
package/dist/cjs/components/StrapiImage.js CHANGED
@@ -12,6 +12,7 @@ var utils = require('../lib/utils.js');
12
12
 
13
13
  function StrapiImage(_ref) {
14
14
  let {
15
+ id,
15
16
  src,
16
17
  alt = "",
17
18
  height,
@@ -22,6 +23,7 @@ function StrapiImage(_ref) {
22
23
  const imageUrl = utils.getStrapiMedia(src);
23
24
  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
24
25
  return /*#__PURE__*/React.createElement(Image, {
26
+ id: id,
25
27
  src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
26
28
  alt: alt,
27
29
  height: height,
package/dist/cjs/components/TextImageSection.js CHANGED
@@ -15,6 +15,67 @@ var StrapiImage = require('./StrapiImage.js');
15
15
  var utils = require('../lib/utils.js');
16
16
 
17
17
  const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
18
+ function StickyImage(_ref) {
19
+ let {
20
+ image
21
+ } = _ref;
22
+ const theme = material.useTheme();
23
+ const imageSrc = image.url;
24
+ if (imageSrc === undefined) {
25
+ return null;
26
+ }
27
+ const [offsetY, setOffsetY] = React.useState(0);
28
+ const handleScroll = () => {
29
+ const offset = 160;
30
+ const imageDivID = "image-container".concat(image.url);
31
+ const imageDiv = document.getElementById(imageDivID);
32
+ const imageID = "image".concat(image.url);
33
+ const imageElement = document.getElementById(imageID);
34
+ if (imageDiv === null || imageElement === null) {
35
+ return;
36
+ }
37
+ const imageDivRect = imageDiv.getBoundingClientRect();
38
+ const imageRect = imageElement.getBoundingClientRect();
39
+ if (imageRect.height >= imageDivRect.height) {
40
+ return;
41
+ }
42
+ const imageAtBottomOffset = imageDivRect.height - imageRect.height;
43
+ if (imageDivRect.y <= offset && -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
44
+ setOffsetY(-imageDivRect.y + offset);
45
+ } else if (imageDivRect.y > 0) {
46
+ setOffsetY(0);
47
+ } else {
48
+ setOffsetY(imageAtBottomOffset);
49
+ }
50
+ };
51
+ React.useEffect(() => {
52
+ window.addEventListener("scroll", handleScroll);
53
+ return () => window.removeEventListener("scroll", handleScroll);
54
+ }, []); // Empty dependency array to run effect only once
55
+
56
+ return /*#__PURE__*/React.createElement(material.Box, {
57
+ id: "image-container".concat(image.url),
58
+ sx: {
59
+ height: "100%",
60
+ position: "relative"
61
+ }
62
+ }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
63
+ id: "image".concat(image.url),
64
+ alt: image.alt,
65
+ height: image.height,
66
+ width: image.width,
67
+ src: image.url,
68
+ style: {
69
+ width: "100%",
70
+ height: "auto",
71
+ display: "block",
72
+ position: "relative",
73
+ top: offsetY,
74
+ borderRadius: 4,
75
+ border: "1px solid ".concat(theme.palette.secondary.main)
76
+ }
77
+ }));
78
+ }
18
79
 
19
80
  /*
20
81
  TODO intregrate this interface into StrapiImage.tsx
@@ -28,10 +89,10 @@ interface ImageProps {
28
89
  height: number;
29
90
  } */
30
91
 
31
- function TextImageSection(_ref) {
92
+ function TextImageSection(_ref2) {
32
93
  let {
33
94
  data
34
- } = _ref;
95
+ } = _ref2;
35
96
  const {
36
97
  title,
37
98
  text,
@@ -54,42 +115,28 @@ function TextImageSection(_ref) {
54
115
  my: 1,
55
116
  ...sx
56
117
  }
57
- }, /*#__PURE__*/React.createElement(material.Paper, {
58
- sx: {
59
- p: 2,
60
- backdropFilter: "blur(3px)",
61
- backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
62
- border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
63
- }
64
118
  }, title && /*#__PURE__*/React.createElement(material.Typography, {
65
119
  variant: "h1",
66
120
  textAlign: "center",
67
121
  sx: {
68
122
  pb: 2
69
123
  }
70
- }, title), /*#__PURE__*/React.createElement(material.Stack, {
124
+ }, title), /*#__PURE__*/React.createElement(material.Grid, {
125
+ container: true,
71
126
  spacing: 2,
72
- direction: reverse ? "row-reverse" : "row",
73
- sx: {
74
- [theme.breakpoints.down("sm")]: {
75
- flexDirection: "column"
76
- }
77
- }
78
- }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
127
+ direction: reverse ? "row-reverse" : "row"
128
+ }, /*#__PURE__*/React.createElement(material.Grid, {
129
+ item: true,
130
+ xs: 12,
131
+ md: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 8 : 12
132
+ }, /*#__PURE__*/React.createElement(material.Paper, {
79
133
  sx: {
80
- minWidth: 200,
81
- height: "100%",
82
- overflow: "hidden",
83
- display: "flex",
84
- alignItems: "center",
85
- justifyContent: "center"
134
+ p: 2,
135
+ backdropFilter: "blur(3px)",
136
+ backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
137
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
86
138
  }
87
- }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
88
- alt: image.alt,
89
- height: image.height,
90
- width: image.width,
91
- src: image.url
92
- })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
139
+ }, text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
93
140
  sx: {
94
141
  height: "100%",
95
142
  overflow: "hidden",
@@ -97,7 +144,13 @@ function TextImageSection(_ref) {
97
144
  alignItems: "center",
98
145
  justifyContent: "center"
99
146
  }
100
- }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))));
147
+ }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
148
+ item: true,
149
+ xs: 12,
150
+ md: 4
151
+ }, /*#__PURE__*/React.createElement(StickyImage, {
152
+ image: image
153
+ }))));
101
154
  }
102
155
 
103
156
  exports.default = TextImageSection;
package/dist/esm/components/PersonaliaSection.js CHANGED
@@ -99,13 +99,15 @@ function PersonaliaSection(_ref) {
99
99
  variant: "outlined",
100
100
  startIcon: /*#__PURE__*/React__default.createElement(LinkedIn, null),
101
101
  href: partner.linkedIn,
102
- target: "_blank"
102
+ target: "_blank",
103
+ color: "secondary"
103
104
  }, "LinkedIn"), partner.email && /*#__PURE__*/React__default.createElement(Tooltip, {
104
105
  title: "".concat(partner.email)
105
106
  }, /*#__PURE__*/React__default.createElement(Button, {
106
107
  variant: "outlined",
107
108
  startIcon: /*#__PURE__*/React__default.createElement(Email, null),
108
- href: "mailto:".concat(partner.email)
109
+ href: "mailto:".concat(partner.email),
110
+ color: "secondary"
109
111
  }, "Email")))))));
110
112
  })));
111
113
  }
package/dist/esm/components/StrapiImage.js CHANGED
@@ -10,6 +10,7 @@ import { getStrapiMedia } from '../lib/utils.js';
10
10
 
11
11
  function StrapiImage(_ref) {
12
12
  let {
13
+ id,
13
14
  src,
14
15
  alt = "",
15
16
  height,
@@ -20,6 +21,7 @@ function StrapiImage(_ref) {
20
21
  const imageUrl = getStrapiMedia(src);
21
22
  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
22
23
  return /*#__PURE__*/React__default.createElement(Image, {
24
+ id: id,
23
25
  src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
24
26
  alt: alt,
25
27
  height: height,
package/dist/esm/components/TextImageSection.js CHANGED
@@ -5,12 +5,73 @@
5
5
  * @license MIT
6
6
  */
7
7
 
8
- import React__default from 'react';
9
- import { useTheme, Container, Paper, Typography, Stack, Box } from '@mui/material';
8
+ import React__default, { useState, useEffect } from 'react';
9
+ import { useTheme, Container, Typography, Grid, Paper, Box } from '@mui/material';
10
10
  import { StrapiImage } from './StrapiImage.js';
11
11
  import { setOpacity } from '../lib/utils.js';
12
12
 
13
13
  const MuiMarkdown = /*#__PURE__*/React__default.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
14
+ function StickyImage(_ref) {
15
+ let {
16
+ image
17
+ } = _ref;
18
+ const theme = useTheme();
19
+ const imageSrc = image.url;
20
+ if (imageSrc === undefined) {
21
+ return null;
22
+ }
23
+ const [offsetY, setOffsetY] = useState(0);
24
+ const handleScroll = () => {
25
+ const offset = 160;
26
+ const imageDivID = "image-container".concat(image.url);
27
+ const imageDiv = document.getElementById(imageDivID);
28
+ const imageID = "image".concat(image.url);
29
+ const imageElement = document.getElementById(imageID);
30
+ if (imageDiv === null || imageElement === null) {
31
+ return;
32
+ }
33
+ const imageDivRect = imageDiv.getBoundingClientRect();
34
+ const imageRect = imageElement.getBoundingClientRect();
35
+ if (imageRect.height >= imageDivRect.height) {
36
+ return;
37
+ }
38
+ const imageAtBottomOffset = imageDivRect.height - imageRect.height;
39
+ if (imageDivRect.y <= offset && -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
40
+ setOffsetY(-imageDivRect.y + offset);
41
+ } else if (imageDivRect.y > 0) {
42
+ setOffsetY(0);
43
+ } else {
44
+ setOffsetY(imageAtBottomOffset);
45
+ }
46
+ };
47
+ useEffect(() => {
48
+ window.addEventListener("scroll", handleScroll);
49
+ return () => window.removeEventListener("scroll", handleScroll);
50
+ }, []); // Empty dependency array to run effect only once
51
+
52
+ return /*#__PURE__*/React__default.createElement(Box, {
53
+ id: "image-container".concat(image.url),
54
+ sx: {
55
+ height: "100%",
56
+ position: "relative"
57
+ }
58
+ }, /*#__PURE__*/React__default.createElement(StrapiImage, {
59
+ id: "image".concat(image.url),
60
+ alt: image.alt,
61
+ height: image.height,
62
+ width: image.width,
63
+ src: image.url,
64
+ style: {
65
+ width: "100%",
66
+ height: "auto",
67
+ display: "block",
68
+ position: "relative",
69
+ top: offsetY,
70
+ borderRadius: 4,
71
+ border: "1px solid ".concat(theme.palette.secondary.main)
72
+ }
73
+ }));
74
+ }
14
75
 
15
76
  /*
16
77
  TODO intregrate this interface into StrapiImage.tsx
@@ -24,10 +85,10 @@ interface ImageProps {
24
85
  height: number;
25
86
  } */
26
87
 
27
- function TextImageSection(_ref) {
88
+ function TextImageSection(_ref2) {
28
89
  let {
29
90
  data
30
- } = _ref;
91
+ } = _ref2;
31
92
  const {
32
93
  title,
33
94
  text,
@@ -50,42 +111,28 @@ function TextImageSection(_ref) {
50
111
  my: 1,
51
112
  ...sx
52
113
  }
53
- }, /*#__PURE__*/React__default.createElement(Paper, {
54
- sx: {
55
- p: 2,
56
- backdropFilter: "blur(3px)",
57
- backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
58
- border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
59
- }
60
114
  }, title && /*#__PURE__*/React__default.createElement(Typography, {
61
115
  variant: "h1",
62
116
  textAlign: "center",
63
117
  sx: {
64
118
  pb: 2
65
119
  }
66
- }, title), /*#__PURE__*/React__default.createElement(Stack, {
120
+ }, title), /*#__PURE__*/React__default.createElement(Grid, {
121
+ container: true,
67
122
  spacing: 2,
68
- direction: reverse ? "row-reverse" : "row",
69
- sx: {
70
- [theme.breakpoints.down("sm")]: {
71
- flexDirection: "column"
72
- }
73
- }
74
- }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React__default.createElement(Box, {
123
+ direction: reverse ? "row-reverse" : "row"
124
+ }, /*#__PURE__*/React__default.createElement(Grid, {
125
+ item: true,
126
+ xs: 12,
127
+ md: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 8 : 12
128
+ }, /*#__PURE__*/React__default.createElement(Paper, {
75
129
  sx: {
76
- minWidth: 200,
77
- height: "100%",
78
- overflow: "hidden",
79
- display: "flex",
80
- alignItems: "center",
81
- justifyContent: "center"
130
+ p: 2,
131
+ backdropFilter: "blur(3px)",
132
+ backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
133
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
82
134
  }
83
- }, /*#__PURE__*/React__default.createElement(StrapiImage, {
84
- alt: image.alt,
85
- height: image.height,
86
- width: image.width,
87
- src: image.url
88
- })), text !== null && text !== undefined && /*#__PURE__*/React__default.createElement(Box, {
135
+ }, text !== null && text !== undefined && /*#__PURE__*/React__default.createElement(Box, {
89
136
  sx: {
90
137
  height: "100%",
91
138
  overflow: "hidden",
@@ -93,7 +140,13 @@ function TextImageSection(_ref) {
93
140
  alignItems: "center",
94
141
  justifyContent: "center"
95
142
  }
96
- }, /*#__PURE__*/React__default.createElement(MuiMarkdown, null, text)))));
143
+ }, /*#__PURE__*/React__default.createElement(MuiMarkdown, null, text)))), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React__default.createElement(Grid, {
144
+ item: true,
145
+ xs: 12,
146
+ md: 4
147
+ }, /*#__PURE__*/React__default.createElement(StickyImage, {
148
+ image: image
149
+ }))));
97
150
  }
98
151
 
99
152
  export { TextImageSection as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.156",
3
+ "version": "0.1.158",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/PersonaliaSection.tsx CHANGED
@@ -136,6 +136,7 @@ export function PersonaliaSection({
136
136
  startIcon={<LinkedIn />}
137
137
  href={partner.linkedIn}
138
138
  target="_blank"
139
+ color="secondary"
139
140
  >
140
141
  LinkedIn
141
142
  </Button>
@@ -146,6 +147,7 @@ export function PersonaliaSection({
146
147
  variant="outlined"
147
148
  startIcon={<Email />}
148
149
  href={`mailto:${partner.email}`}
150
+ color="secondary"
149
151
  >
150
152
  Email
151
153
  </Button>
package/src/components/StrapiImage.tsx CHANGED
@@ -3,6 +3,7 @@ import Image from "next/image";
3
3
  import { getStrapiMedia } from "../lib/utils.ts";
4
4
 
5
5
  interface StrapiImageProps {
6
+ id: string;
6
7
  src: string;
7
8
  alt: string;
8
9
  height: number;
@@ -11,6 +12,7 @@ interface StrapiImageProps {
11
12
  }
12
13
 
13
14
  export function StrapiImage({
15
+ id,
14
16
  src,
15
17
  alt = "",
16
18
  height,
@@ -23,6 +25,7 @@ export function StrapiImage({
23
25
 
24
26
  return (
25
27
  <Image
28
+ id={id}
26
29
  src={imageUrl ?? imageFallback}
27
30
  alt={alt}
28
31
  height={height}
package/src/components/TextImageSection.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  "use client";
2
2
 
3
- import React from "react";
3
+ import React, { useState, useEffect } from "react";
4
4
  import {
5
5
  Box,
6
6
  Container,
7
7
  Paper,
8
8
  Typography,
9
- Stack,
9
+ Grid,
10
10
  useTheme,
11
11
  } from "@mui/material";
12
12
  const MuiMarkdown = React.lazy(
@@ -16,6 +16,83 @@ import { StrapiImage } from "./StrapiImage.tsx";
16
16
  import { SxProps, Theme } from "@mui/material/styles";
17
17
  import { setOpacity } from "../lib/utils.ts";
18
18
 
19
+ function StickyImage({ image }) {
20
+ const theme = useTheme();
21
+ const imageSrc = image.url;
22
+
23
+ if (imageSrc === undefined) {
24
+ return null;
25
+ }
26
+
27
+ const [offsetY, setOffsetY] = useState(0);
28
+
29
+ const handleScroll = () => {
30
+ const offset = 160;
31
+
32
+ const imageDivID = `image-container${image.url}`;
33
+ const imageDiv = document.getElementById(imageDivID);
34
+
35
+ const imageID = `image${image.url}`;
36
+ const imageElement = document.getElementById(imageID);
37
+
38
+ if (imageDiv === null || imageElement === null) {
39
+ return;
40
+ }
41
+
42
+ const imageDivRect = imageDiv.getBoundingClientRect();
43
+ const imageRect = imageElement.getBoundingClientRect();
44
+
45
+ if (imageRect.height >= imageDivRect.height) {
46
+ return;
47
+ }
48
+
49
+ const imageAtBottomOffset = imageDivRect.height - imageRect.height;
50
+
51
+ if (
52
+ imageDivRect.y <= offset &&
53
+ -imageDivRect.y <= imageDivRect.height - imageRect.height - offset
54
+ ) {
55
+ setOffsetY(-imageDivRect.y + offset);
56
+ } else if (imageDivRect.y > 0) {
57
+ setOffsetY(0);
58
+ } else {
59
+ setOffsetY(imageAtBottomOffset);
60
+ }
61
+ };
62
+
63
+ useEffect(() => {
64
+ window.addEventListener("scroll", handleScroll);
65
+ return () => window.removeEventListener("scroll", handleScroll);
66
+ }, []); // Empty dependency array to run effect only once
67
+
68
+ return (
69
+ <Box
70
+ id={`image-container${image.url}`}
71
+ sx={{
72
+ height: "100%",
73
+ position: "relative",
74
+ }}
75
+ >
76
+ <StrapiImage
77
+ id={`image${image.url}`}
78
+ alt={image.alt}
79
+ height={image.height}
80
+ width={image.width}
81
+ src={image.url}
82
+ style={{
83
+ width: "100%",
84
+ height: "auto",
85
+ display: "block",
86
+ position: "relative",
87
+ top: offsetY,
88
+ borderRadius: 4,
89
+ border: `1px solid ${theme.palette.secondary.main}`,
90
+ }}
91
+ />
92
+ </Box>
93
+ );
94
+ }
95
+
19
96
  /*
20
97
  TODO intregrate this interface into StrapiImage.tsx
21
98
 
@@ -68,6 +145,69 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
68
145
 
69
146
  return (
70
147
  <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
148
+ {title && (
149
+ <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>
150
+ {title}
151
+ </Typography>
152
+ )}
153
+
154
+ <Grid container spacing={2} direction={reverse ? "row-reverse" : "row"}>
155
+ <Grid item xs={12} md={image?.url !== undefined ? 8 : 12}>
156
+ <Paper
157
+ sx={{
158
+ p: 2,
159
+ backdropFilter: "blur(3px)",
160
+ backgroundColor: setOpacity(
161
+ theme.palette.background.paper,
162
+ glass ? 0.1 : 1
163
+ ),
164
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
165
+ }}
166
+ >
167
+ {text !== null && text !== undefined && (
168
+ <Box
169
+ sx={{
170
+ height: "100%",
171
+ overflow: "hidden",
172
+ display: "flex",
173
+ alignItems: "center",
174
+ justifyContent: "center",
175
+ }}
176
+ >
177
+ <MuiMarkdown>{text}</MuiMarkdown>
178
+ </Box>
179
+ )}
180
+ </Paper>
181
+ </Grid>
182
+ {image?.url !== undefined && (
183
+ <Grid item xs={12} md={4}>
184
+ <StickyImage image={image} />
185
+ </Grid>
186
+ )}
187
+ </Grid>
188
+ </Container>
189
+ );
190
+ }
191
+
192
+ export default TextImageSection;
193
+
194
+ {
195
+ /* <Box
196
+ component={Paper}
197
+ sx={{ border: `1px solid ${theme.palette.secondary.main}` }}
198
+ >
199
+ <StrapiImage
200
+ alt={image.alt}
201
+ height={image.height}
202
+ width={image.width}
203
+ src={image.url}
204
+ style={{ width: "100%", height: "auto", display: "block" }}
205
+ />
206
+ </Box> */
207
+ }
208
+
209
+ {
210
+ /* <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
71
211
  <Paper
72
212
  sx={{
73
213
  p: 2,
@@ -110,6 +250,7 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
110
250
  height={image.height}
111
251
  width={image.width}
112
252
  src={image.url}
253
+ style={{ width: "100%", height: "auto" }}
113
254
  />
114
255
  </Box>
115
256
  )}
@@ -129,8 +270,5 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
129
270
  )}
130
271
  </Stack>
131
272
  </Paper>
132
- </Container>
133
- );
273
+ </Container> */
134
274
  }
135
-
136
- export default TextImageSection;