umwd-components 0.1.25 → 0.1.27

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 (7) hide show
  1. package/dist/cjs/components/NavBar.js +22 -3
  2. package/dist/cjs/components/TextImageBlock.js +20 -11
  3. package/dist/esm/components/NavBar.js +22 -3
  4. package/dist/esm/components/TextImageBlock.js +20 -11
  5. package/package.json +1 -1
  6. package/src/components/NavBar.js +145 -101
  7. package/src/components/TextImageBlock.js +17 -9
package/dist/cjs/components/NavBar.js CHANGED
@@ -14,7 +14,22 @@ var Link = require('next/link');
14
14
  var material = require('@mui/material');
15
15
  var CloseIcon = require('@mui/icons-material/Close');
16
16
  var MoreVertIcon = require('@mui/icons-material/MoreVert');
17
+ var navigation = require('next/navigation');
18
+ var PropTypes = require('prop-types');
17
19
 
20
+ NavBar.propTypes = {
21
+ site_title: PropTypes.string,
22
+ logo: PropTypes.shape({
23
+ url: PropTypes.string.isRequired,
24
+ width: PropTypes.string,
25
+ height: PropTypes.string,
26
+ alt: PropTypes.string
27
+ }).isRequired,
28
+ pages: PropTypes.arrayOf(PropTypes.shape({
29
+ name: PropTypes.string.isRequired,
30
+ url: PropTypes.string.isRequired
31
+ })).isRequired
32
+ };
18
33
  function NavBar({
19
34
  site_title,
20
35
  logo,
@@ -29,6 +44,7 @@ function NavBar({
29
44
  const handleCloseMobileMenu = e => {
30
45
  setMobileNavOpen(false);
31
46
  };
47
+ const router = navigation.useRouter();
32
48
  return /*#__PURE__*/React.createElement(material.AppBar, {
33
49
  position: "sticky"
34
50
  }, /*#__PURE__*/React.createElement(material.Container, {
@@ -86,8 +102,10 @@ function NavBar({
86
102
  }
87
103
  }, pages.map(page => {
88
104
  return /*#__PURE__*/React.createElement(material.Button, {
89
- key: page.name
90
- /* onClick={() => page.action()} */,
105
+ key: page.name,
106
+ onClick: () => {
107
+ router.push(page.url);
108
+ },
91
109
  sx: {
92
110
  my: 2,
93
111
  color: "primary.contrastText",
@@ -229,7 +247,8 @@ function NavBar({
229
247
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
230
248
  key: page.name,
231
249
  onClick: () => {
232
- /* page.action(); */handleCloseMobileMenu();
250
+ router.push(page.url);
251
+ handleCloseMobileMenu();
233
252
  }
234
253
  }, /*#__PURE__*/React.createElement(material.ListItemText, {
235
254
  primary: page.name
package/dist/cjs/components/TextImageBlock.js CHANGED
@@ -24,6 +24,9 @@ function TextImageBlock({
24
24
  }) {
25
25
  reverse = Boolean(reverse);
26
26
  maxWidth = maxWidth || "100%";
27
+
28
+ /* TODO Text_content should deal with linebreaks */
29
+
27
30
  return /*#__PURE__*/React.createElement(material.Grid, {
28
31
  container: true,
29
32
  sx: [{
@@ -32,7 +35,7 @@ function TextImageBlock({
32
35
  }, text_content === undefined && {
33
36
  display: "grid",
34
37
  alignItems: "center",
35
- justifyItems: "center"
38
+ justifyContent: "center"
36
39
  }]
37
40
  }, block_title && /*#__PURE__*/React.createElement(material.Grid, {
38
41
  item: true,
@@ -41,32 +44,35 @@ function TextImageBlock({
41
44
  p: 1,
42
45
  display: "grid",
43
46
  alignItems: "center",
44
- justifyItems: "center"
47
+ justifyContent: "center"
45
48
  }
46
49
  }, /*#__PURE__*/React.createElement(material.Typography, {
47
50
  variant: "h1"
48
51
  }, block_title)), reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, image_content?.url !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
49
52
  item: true,
50
- xs: 6,
53
+ xs: text_content !== null && text_content !== undefined ? 6 : 12,
51
54
  sx: {
52
55
  padding: "10px",
53
56
  minHeight: "100vh",
54
57
  display: "grid",
55
58
  alignItems: "center",
56
- justifyItems: "center"
59
+ justifyContent: "center"
57
60
  }
58
61
  }, /*#__PURE__*/React.createElement(material.Box, {
59
62
  sx: {
60
63
  width: "100%",
61
64
  height: "100%",
62
- overflow: "hidden"
65
+ overflow: "hidden",
66
+ display: "flex",
67
+ alignItems: "center",
68
+ justifyContent: "center"
63
69
  }
64
70
  }, /*#__PURE__*/React.createElement(Image, {
65
71
  src: image_content.url,
66
72
  width: image_content.width,
67
73
  height: image_content.height,
68
74
  alt: image_content.name
69
- }))), text_content && /*#__PURE__*/React.createElement(material.Grid, {
75
+ }))), text_content !== null && text_content !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
70
76
  item: true,
71
77
  xs: image_content?.url !== undefined ? 6 : 12,
72
78
  sx: {
@@ -74,7 +80,7 @@ function TextImageBlock({
74
80
  minHeight: "100vh",
75
81
  display: "grid",
76
82
  alignItems: "center",
77
- justifyItems: "center"
83
+ justifyContent: "center"
78
84
  }
79
85
  }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text_content))) : /*#__PURE__*/React.createElement(React.Fragment, null, text_content && /*#__PURE__*/React.createElement(material.Grid, {
80
86
  item: true,
@@ -84,23 +90,26 @@ function TextImageBlock({
84
90
  minHeight: "100vh",
85
91
  display: "grid",
86
92
  alignItems: "center",
87
- justifyItems: "center"
93
+ justifyContent: "center"
88
94
  }
89
95
  }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text_content)), image_content?.url !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
90
96
  item: true,
91
- xs: 6,
97
+ xs: text_content !== null && text_content !== undefined ? 6 : 12,
92
98
  sx: {
93
99
  padding: "10px",
94
100
  minHeight: "100vh",
95
101
  display: "grid",
96
102
  alignItems: "center",
97
- justifyItems: "center"
103
+ justifyContent: "center"
98
104
  }
99
105
  }, /*#__PURE__*/React.createElement(material.Box, {
100
106
  sx: {
101
107
  width: "100%",
102
108
  height: "100%",
103
- overflow: "hidden"
109
+ overflow: "hidden",
110
+ display: "flex",
111
+ alignItems: "center",
112
+ justifyContent: "center"
104
113
  }
105
114
  }, /*#__PURE__*/React.createElement(Image, {
106
115
  src: image_content.url,
package/dist/esm/components/NavBar.js CHANGED
@@ -10,7 +10,22 @@ import Link from 'next/link';
10
10
  import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
11
11
  import CloseIcon from '@mui/icons-material/Close';
12
12
  import MoreVertIcon from '@mui/icons-material/MoreVert';
13
+ import { useRouter } from 'next/navigation';
14
+ import PropTypes from 'prop-types';
13
15
 
16
+ NavBar.propTypes = {
17
+ site_title: PropTypes.string,
18
+ logo: PropTypes.shape({
19
+ url: PropTypes.string.isRequired,
20
+ width: PropTypes.string,
21
+ height: PropTypes.string,
22
+ alt: PropTypes.string
23
+ }).isRequired,
24
+ pages: PropTypes.arrayOf(PropTypes.shape({
25
+ name: PropTypes.string.isRequired,
26
+ url: PropTypes.string.isRequired
27
+ })).isRequired
28
+ };
14
29
  function NavBar({
15
30
  site_title,
16
31
  logo,
@@ -25,6 +40,7 @@ function NavBar({
25
40
  const handleCloseMobileMenu = e => {
26
41
  setMobileNavOpen(false);
27
42
  };
43
+ const router = useRouter();
28
44
  return /*#__PURE__*/React.createElement(AppBar, {
29
45
  position: "sticky"
30
46
  }, /*#__PURE__*/React.createElement(Container, {
@@ -82,8 +98,10 @@ function NavBar({
82
98
  }
83
99
  }, pages.map(page => {
84
100
  return /*#__PURE__*/React.createElement(Button, {
85
- key: page.name
86
- /* onClick={() => page.action()} */,
101
+ key: page.name,
102
+ onClick: () => {
103
+ router.push(page.url);
104
+ },
87
105
  sx: {
88
106
  my: 2,
89
107
  color: "primary.contrastText",
@@ -225,7 +243,8 @@ function NavBar({
225
243
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
226
244
  key: page.name,
227
245
  onClick: () => {
228
- /* page.action(); */handleCloseMobileMenu();
246
+ router.push(page.url);
247
+ handleCloseMobileMenu();
229
248
  }
230
249
  }, /*#__PURE__*/React.createElement(ListItemText, {
231
250
  primary: page.name
package/dist/esm/components/TextImageBlock.js CHANGED
@@ -20,6 +20,9 @@ function TextImageBlock({
20
20
  }) {
21
21
  reverse = Boolean(reverse);
22
22
  maxWidth = maxWidth || "100%";
23
+
24
+ /* TODO Text_content should deal with linebreaks */
25
+
23
26
  return /*#__PURE__*/React.createElement(Grid, {
24
27
  container: true,
25
28
  sx: [{
@@ -28,7 +31,7 @@ function TextImageBlock({
28
31
  }, text_content === undefined && {
29
32
  display: "grid",
30
33
  alignItems: "center",
31
- justifyItems: "center"
34
+ justifyContent: "center"
32
35
  }]
33
36
  }, block_title && /*#__PURE__*/React.createElement(Grid, {
34
37
  item: true,
@@ -37,32 +40,35 @@ function TextImageBlock({
37
40
  p: 1,
38
41
  display: "grid",
39
42
  alignItems: "center",
40
- justifyItems: "center"
43
+ justifyContent: "center"
41
44
  }
42
45
  }, /*#__PURE__*/React.createElement(Typography, {
43
46
  variant: "h1"
44
47
  }, block_title)), reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, image_content?.url !== undefined && /*#__PURE__*/React.createElement(Grid, {
45
48
  item: true,
46
- xs: 6,
49
+ xs: text_content !== null && text_content !== undefined ? 6 : 12,
47
50
  sx: {
48
51
  padding: "10px",
49
52
  minHeight: "100vh",
50
53
  display: "grid",
51
54
  alignItems: "center",
52
- justifyItems: "center"
55
+ justifyContent: "center"
53
56
  }
54
57
  }, /*#__PURE__*/React.createElement(Box, {
55
58
  sx: {
56
59
  width: "100%",
57
60
  height: "100%",
58
- overflow: "hidden"
61
+ overflow: "hidden",
62
+ display: "flex",
63
+ alignItems: "center",
64
+ justifyContent: "center"
59
65
  }
60
66
  }, /*#__PURE__*/React.createElement(Image, {
61
67
  src: image_content.url,
62
68
  width: image_content.width,
63
69
  height: image_content.height,
64
70
  alt: image_content.name
65
- }))), text_content && /*#__PURE__*/React.createElement(Grid, {
71
+ }))), text_content !== null && text_content !== undefined && /*#__PURE__*/React.createElement(Grid, {
66
72
  item: true,
67
73
  xs: image_content?.url !== undefined ? 6 : 12,
68
74
  sx: {
@@ -70,7 +76,7 @@ function TextImageBlock({
70
76
  minHeight: "100vh",
71
77
  display: "grid",
72
78
  alignItems: "center",
73
- justifyItems: "center"
79
+ justifyContent: "center"
74
80
  }
75
81
  }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text_content))) : /*#__PURE__*/React.createElement(React.Fragment, null, text_content && /*#__PURE__*/React.createElement(Grid, {
76
82
  item: true,
@@ -80,23 +86,26 @@ function TextImageBlock({
80
86
  minHeight: "100vh",
81
87
  display: "grid",
82
88
  alignItems: "center",
83
- justifyItems: "center"
89
+ justifyContent: "center"
84
90
  }
85
91
  }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text_content)), image_content?.url !== undefined && /*#__PURE__*/React.createElement(Grid, {
86
92
  item: true,
87
- xs: 6,
93
+ xs: text_content !== null && text_content !== undefined ? 6 : 12,
88
94
  sx: {
89
95
  padding: "10px",
90
96
  minHeight: "100vh",
91
97
  display: "grid",
92
98
  alignItems: "center",
93
- justifyItems: "center"
99
+ justifyContent: "center"
94
100
  }
95
101
  }, /*#__PURE__*/React.createElement(Box, {
96
102
  sx: {
97
103
  width: "100%",
98
104
  height: "100%",
99
- overflow: "hidden"
105
+ overflow: "hidden",
106
+ display: "flex",
107
+ alignItems: "center",
108
+ justifyContent: "center"
100
109
  }
101
110
  }, /*#__PURE__*/React.createElement(Image, {
102
111
  src: image_content.url,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.25",
3
+ "version": "0.1.27",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/NavBar.js CHANGED
@@ -1,4 +1,4 @@
1
- 'use client';
1
+ "use client";
2
2
 
3
3
  import React from "react";
4
4
  import Link from "next/link";
@@ -14,14 +14,33 @@ import {
14
14
  List,
15
15
  ListItem,
16
16
  Divider,
17
- ListItemText
17
+ ListItemText,
18
18
  } from "@mui/material";
19
19
 
20
20
  import CloseIcon from "@mui/icons-material/Close";
21
21
  import MoreVertIcon from "@mui/icons-material/MoreVert";
22
+ import { useRouter } from "next/navigation";
22
23
 
23
- function NavBar({site_title, logo, pages}){
24
- // handleMobileMenu
24
+ import PropTypes from "prop-types";
25
+
26
+ NavBar.propTypes = {
27
+ site_title: PropTypes.string,
28
+ logo: PropTypes.shape({
29
+ url: PropTypes.string.isRequired,
30
+ width: PropTypes.string,
31
+ height: PropTypes.string,
32
+ alt: PropTypes.string,
33
+ }).isRequired,
34
+ pages: PropTypes.arrayOf(
35
+ PropTypes.shape({
36
+ name: PropTypes.string.isRequired,
37
+ url: PropTypes.string.isRequired,
38
+ })
39
+ ).isRequired,
40
+ };
41
+
42
+ function NavBar({ site_title, logo, pages }) {
43
+ // handleMobileMenu
25
44
 
26
45
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
27
46
 
@@ -33,37 +52,43 @@ function NavBar({site_title, logo, pages}){
33
52
  setMobileNavOpen(false);
34
53
  };
35
54
 
55
+ const router = useRouter();
56
+
36
57
  return (
37
58
  <AppBar position="sticky">
38
59
  <Container maxWidth="xl">
39
- <Toolbar disableGutters sx={{py:1}}>
60
+ <Toolbar disableGutters sx={{ py: 1 }}>
40
61
  {/* logo and site title for big screens */}
41
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
62
+ <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
42
63
  <Box
43
- sx={{ display: { xs: "none", md: "flex" }, cursor: "pointer", alignItems: "center"}}
44
- ><Box sx={{ display: "flex", mr: 1 }}>
45
- <img
46
- src={logo.url}
47
- width={logo.width || "32px"}
48
- height={logo.height || "32px"}
49
- alt="site logo"
50
- style={{maxWidth: "60px", maxHeight: "60px"}}
51
- />
52
- </Box>
53
- {site_title !== undefined && (
54
- <Typography
55
-
56
- variant="h6"
57
- noWrap
58
- component="h1"
59
- sx={{
60
- display: "flex",
61
- textDecoration: "none",
62
- }}
63
- >
64
- {site_title}
65
- </Typography>
66
- )}
64
+ sx={{
65
+ display: { xs: "none", md: "flex" },
66
+ cursor: "pointer",
67
+ alignItems: "center",
68
+ }}
69
+ >
70
+ <Box sx={{ display: "flex", mr: 1 }}>
71
+ <img
72
+ src={logo.url}
73
+ width={logo.width || "32px"}
74
+ height={logo.height || "32px"}
75
+ alt="site logo"
76
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
77
+ />
78
+ </Box>
79
+ {site_title !== undefined && (
80
+ <Typography
81
+ variant="h6"
82
+ noWrap
83
+ component="h1"
84
+ sx={{
85
+ display: "flex",
86
+ textDecoration: "none",
87
+ }}
88
+ >
89
+ {site_title}
90
+ </Typography>
91
+ )}
67
92
  </Box>
68
93
  </Link>
69
94
 
@@ -75,49 +100,58 @@ function NavBar({site_title, logo, pages}){
75
100
  alignItems: "center",
76
101
  }}
77
102
  >
78
-
79
-
80
103
  {pages.map((page) => {
81
104
  return (
82
- <Button
83
- key={page.name}
84
- /* onClick={() => page.action()} */
85
- sx={{ my: 2, color: "primary.contrastText", display: "block" }}
86
- >
87
- {page.name}
88
- </Button>
89
- )})}
90
-
105
+ <Button
106
+ key={page.name}
107
+ onClick={() => {
108
+ router.push(page.url);
109
+ }}
110
+ sx={{
111
+ my: 2,
112
+ color: "primary.contrastText",
113
+ display: "block",
114
+ }}
115
+ >
116
+ {page.name}
117
+ </Button>
118
+ );
119
+ })}
91
120
  </Box>
92
121
 
93
122
  {/* small screen logo and site title */}
94
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
95
- <Box sx={{ display: { xs: "flex", md: "none" }, alignItems:"center"}}>
96
-
97
- {logo.url !== undefined && <Box sx={{ display: "flex", mr: 1 }}>
123
+ <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
124
+ <Box
125
+ sx={{ display: { xs: "flex", md: "none" }, alignItems: "center" }}
126
+ >
127
+ {logo.url !== undefined && (
128
+ <Box sx={{ display: "flex", mr: 1 }}>
98
129
  <img
99
130
  src={logo.url}
100
131
  width={logo.width || "32px"}
101
132
  height={logo.height || "32px"}
102
133
  alt={logo.alt || "site logo"}
103
- style={{maxWidth: "60px", maxHeight: "60px"}}
134
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
104
135
  />
105
- </Box>}
106
- {site_title !== undefined && <Typography
107
- variant="h5"
108
- noWrap
109
- component="h1"
110
- sx={{
111
- display: "flex",
112
- flexGrow: 1,
113
- }}
114
- >
115
- {site_title}
116
- </Typography>}
136
+ </Box>
137
+ )}
138
+ {site_title !== undefined && (
139
+ <Typography
140
+ variant="h5"
141
+ noWrap
142
+ component="h1"
143
+ sx={{
144
+ display: "flex",
145
+ flexGrow: 1,
146
+ }}
147
+ >
148
+ {site_title}
149
+ </Typography>
150
+ )}
117
151
  </Box>
118
152
  </Link>
119
153
  {/* spacer box */}
120
- <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box>
154
+ <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box>
121
155
 
122
156
  {/* small screen nav menu */}
123
157
 
@@ -145,33 +179,43 @@ function NavBar({site_title, logo, pages}){
145
179
  >
146
180
  <AppBar position="sticky">
147
181
  <Container maxWidth="xl">
148
- <Toolbar disableGutters sx={{py:1, justifyContent:"space-between"}}>
149
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
150
- <Box sx={{display: "flex", flexDirection: "row", alignItems: "center"}}>
151
- <Box sx={{ display: "flex", mr: 1 }}>
152
- <img
153
- src={logo.url}
154
- alt={logo.alt || "logo"}
155
- width={logo.width || "32px"}
156
- height={logo.height || "32px"}
157
- style={{maxWidth: "60px", maxHeight: "60px"}}
158
- />
159
- </Box>
160
- <Typography
161
- variant="h5"
162
- noWrap
163
- component="h1"
164
- sx={{
165
- display: "flex",
166
- flexGrow: 1,
167
- }}
182
+ <Toolbar
183
+ disableGutters
184
+ sx={{ py: 1, justifyContent: "space-between" }}
185
+ >
186
+ <Link
187
+ href="/"
188
+ style={{ textDecoration: "none", color: "unset" }}
168
189
  >
169
-
170
- {site_title !== undefined && site_title}
171
-
172
- </Typography>
173
- </Box>
174
- </Link>
190
+ <Box
191
+ sx={{
192
+ display: "flex",
193
+ flexDirection: "row",
194
+ alignItems: "center",
195
+ }}
196
+ >
197
+ <Box sx={{ display: "flex", mr: 1 }}>
198
+ <img
199
+ src={logo.url}
200
+ alt={logo.alt || "logo"}
201
+ width={logo.width || "32px"}
202
+ height={logo.height || "32px"}
203
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
204
+ />
205
+ </Box>
206
+ <Typography
207
+ variant="h5"
208
+ noWrap
209
+ component="h1"
210
+ sx={{
211
+ display: "flex",
212
+ flexGrow: 1,
213
+ }}
214
+ >
215
+ {site_title !== undefined && site_title}
216
+ </Typography>
217
+ </Box>
218
+ </Link>
175
219
  <Button
176
220
  onClick={handleCloseMobileMenu}
177
221
  sx={{
@@ -192,22 +236,22 @@ function NavBar({site_title, logo, pages}){
192
236
  </Container>
193
237
  </AppBar>
194
238
  <List>
195
- {pages.map((page) =>
196
- {
197
- return (
198
- <>
199
- <ListItem
200
- key={page.name}
201
- onClick={() => {/* page.action(); */handleCloseMobileMenu();}}
202
- >
203
- <ListItemText primary={page.name} />
204
- </ListItem>
205
- <Divider />
206
- </>
207
- )})}
208
-
209
-
210
-
239
+ {pages.map((page) => {
240
+ return (
241
+ <>
242
+ <ListItem
243
+ key={page.name}
244
+ onClick={() => {
245
+ router.push(page.url);
246
+ handleCloseMobileMenu();
247
+ }}
248
+ >
249
+ <ListItemText primary={page.name} />
250
+ </ListItem>
251
+ <Divider />
252
+ </>
253
+ );
254
+ })}
211
255
  </List>
212
256
  </Dialog>
213
257
  </Box>
package/src/components/TextImageBlock.js CHANGED
@@ -17,6 +17,8 @@ function TextImageBlock({
17
17
 
18
18
  maxWidth = maxWidth || "100%";
19
19
 
20
+ /* TODO Text_content should deal with linebreaks */
21
+
20
22
  return (
21
23
  <Grid
22
24
  container
@@ -25,7 +27,7 @@ function TextImageBlock({
25
27
  text_content === undefined && {
26
28
  display: "grid",
27
29
  alignItems: "center",
28
- justifyItems: "center",
30
+ justifyContent: "center",
29
31
  },
30
32
  ]}
31
33
  >
@@ -37,7 +39,7 @@ function TextImageBlock({
37
39
  p: 1,
38
40
  display: "grid",
39
41
  alignItems: "center",
40
- justifyItems: "center",
42
+ justifyContent: "center",
41
43
  }}
42
44
  >
43
45
  <Typography variant="h1">{block_title}</Typography>
@@ -48,13 +50,13 @@ function TextImageBlock({
48
50
  {image_content?.url !== undefined && (
49
51
  <Grid
50
52
  item
51
- xs={6}
53
+ xs={text_content !== null && text_content !== undefined ? 6 : 12}
52
54
  sx={{
53
55
  padding: "10px",
54
56
  minHeight: "100vh",
55
57
  display: "grid",
56
58
  alignItems: "center",
57
- justifyItems: "center",
59
+ justifyContent: "center",
58
60
  }}
59
61
  >
60
62
  <Box
@@ -62,6 +64,9 @@ function TextImageBlock({
62
64
  width: "100%",
63
65
  height: "100%",
64
66
  overflow: "hidden",
67
+ display: "flex",
68
+ alignItems: "center",
69
+ justifyContent: "center",
65
70
  }}
66
71
  >
67
72
  <Image
@@ -73,7 +78,7 @@ function TextImageBlock({
73
78
  </Box>
74
79
  </Grid>
75
80
  )}
76
- {text_content && (
81
+ {text_content !== null && text_content !== undefined && (
77
82
  <Grid
78
83
  item
79
84
  xs={image_content?.url !== undefined ? 6 : 12}
@@ -82,7 +87,7 @@ function TextImageBlock({
82
87
  minHeight: "100vh",
83
88
  display: "grid",
84
89
  alignItems: "center",
85
- justifyItems: "center",
90
+ justifyContent: "center",
86
91
  }}
87
92
  >
88
93
  <MuiMarkdown>{text_content}</MuiMarkdown>
@@ -100,7 +105,7 @@ function TextImageBlock({
100
105
  minHeight: "100vh",
101
106
  display: "grid",
102
107
  alignItems: "center",
103
- justifyItems: "center",
108
+ justifyContent: "center",
104
109
  }}
105
110
  >
106
111
  <MuiMarkdown>{text_content}</MuiMarkdown>
@@ -109,13 +114,13 @@ function TextImageBlock({
109
114
  {image_content?.url !== undefined && (
110
115
  <Grid
111
116
  item
112
- xs={6}
117
+ xs={text_content !== null && text_content !== undefined ? 6 : 12}
113
118
  sx={{
114
119
  padding: "10px",
115
120
  minHeight: "100vh",
116
121
  display: "grid",
117
122
  alignItems: "center",
118
- justifyItems: "center",
123
+ justifyContent: "center",
119
124
  }}
120
125
  >
121
126
  <Box
@@ -123,6 +128,9 @@ function TextImageBlock({
123
128
  width: "100%",
124
129
  height: "100%",
125
130
  overflow: "hidden",
131
+ display: "flex",
132
+ alignItems: "center",
133
+ justifyContent: "center",
126
134
  }}
127
135
  >
128
136
  <Image