umwd-components 0.1.20 → 0.1.21
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.
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
11
11
|
|
|
12
12
|
var React = require('react');
|
|
13
13
|
var material = require('@mui/material');
|
|
14
|
+
var Image = require('next/image');
|
|
14
15
|
var muiMarkdown = require('mui-markdown');
|
|
15
16
|
var PropTypes = require('prop-types');
|
|
16
17
|
|
|
@@ -18,12 +19,17 @@ function TextImageBlock({
|
|
|
18
19
|
block_title,
|
|
19
20
|
text_content,
|
|
20
21
|
image_content,
|
|
21
|
-
reverse
|
|
22
|
+
reverse,
|
|
23
|
+
maxWidth
|
|
22
24
|
}) {
|
|
23
25
|
reverse = Boolean(reverse);
|
|
26
|
+
maxWidth = maxWidth || "100%";
|
|
24
27
|
return /*#__PURE__*/React.createElement(material.Grid, {
|
|
25
28
|
container: true,
|
|
26
|
-
sx: [
|
|
29
|
+
sx: [{
|
|
30
|
+
maxWidth: maxWidth,
|
|
31
|
+
margin: "auto"
|
|
32
|
+
}, text_content === undefined && {
|
|
27
33
|
display: "grid",
|
|
28
34
|
alignItems: "center",
|
|
29
35
|
justifyItems: "center"
|
|
@@ -32,6 +38,7 @@ function TextImageBlock({
|
|
|
32
38
|
item: true,
|
|
33
39
|
xs: 12,
|
|
34
40
|
sx: {
|
|
41
|
+
p: 1,
|
|
35
42
|
display: "grid",
|
|
36
43
|
alignItems: "center",
|
|
37
44
|
justifyItems: "center"
|
|
@@ -42,12 +49,13 @@ function TextImageBlock({
|
|
|
42
49
|
item: true,
|
|
43
50
|
xs: 6,
|
|
44
51
|
sx: {
|
|
52
|
+
p: 1,
|
|
45
53
|
minHeight: "100vh",
|
|
46
54
|
display: "grid",
|
|
47
55
|
alignItems: "center",
|
|
48
56
|
justifyItems: "center"
|
|
49
57
|
}
|
|
50
|
-
}, /*#__PURE__*/React.createElement(
|
|
58
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
51
59
|
src: image_content.url,
|
|
52
60
|
width: image_content.width,
|
|
53
61
|
height: image_content.height,
|
|
@@ -56,6 +64,7 @@ function TextImageBlock({
|
|
|
56
64
|
item: true,
|
|
57
65
|
xs: image_content?.url !== undefined ? 6 : 12,
|
|
58
66
|
sx: {
|
|
67
|
+
p: 1,
|
|
59
68
|
minHeight: "100vh",
|
|
60
69
|
display: "grid",
|
|
61
70
|
alignItems: "center",
|
|
@@ -65,6 +74,7 @@ function TextImageBlock({
|
|
|
65
74
|
item: true,
|
|
66
75
|
xs: image_content?.url !== undefined ? 6 : 12,
|
|
67
76
|
sx: {
|
|
77
|
+
p: 1,
|
|
68
78
|
minHeight: "100vh",
|
|
69
79
|
display: "grid",
|
|
70
80
|
alignItems: "center",
|
|
@@ -74,12 +84,13 @@ function TextImageBlock({
|
|
|
74
84
|
item: true,
|
|
75
85
|
xs: 6,
|
|
76
86
|
sx: {
|
|
87
|
+
p: 1,
|
|
77
88
|
minHeight: "100vh",
|
|
78
89
|
display: "grid",
|
|
79
90
|
alignItems: "center",
|
|
80
91
|
justifyItems: "center"
|
|
81
92
|
}
|
|
82
|
-
}, /*#__PURE__*/React.createElement(
|
|
93
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
83
94
|
src: image_content.url,
|
|
84
95
|
width: image_content.width,
|
|
85
96
|
height: image_content.height,
|
|
@@ -95,7 +106,8 @@ TextImageBlock.propTypes = {
|
|
|
95
106
|
height: PropTypes.number,
|
|
96
107
|
alt: PropTypes.string
|
|
97
108
|
}),
|
|
98
|
-
reverse: PropTypes.bool
|
|
109
|
+
reverse: PropTypes.bool,
|
|
110
|
+
maxWidth: PropTypes.string
|
|
99
111
|
};
|
|
100
112
|
|
|
101
113
|
exports.default = TextImageBlock;
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import { Grid, Typography } from '@mui/material';
|
|
10
|
+
import Image from 'next/image';
|
|
10
11
|
import { MuiMarkdown } from 'mui-markdown';
|
|
11
12
|
import PropTypes from 'prop-types';
|
|
12
13
|
|
|
@@ -14,12 +15,17 @@ function TextImageBlock({
|
|
|
14
15
|
block_title,
|
|
15
16
|
text_content,
|
|
16
17
|
image_content,
|
|
17
|
-
reverse
|
|
18
|
+
reverse,
|
|
19
|
+
maxWidth
|
|
18
20
|
}) {
|
|
19
21
|
reverse = Boolean(reverse);
|
|
22
|
+
maxWidth = maxWidth || "100%";
|
|
20
23
|
return /*#__PURE__*/React.createElement(Grid, {
|
|
21
24
|
container: true,
|
|
22
|
-
sx: [
|
|
25
|
+
sx: [{
|
|
26
|
+
maxWidth: maxWidth,
|
|
27
|
+
margin: "auto"
|
|
28
|
+
}, text_content === undefined && {
|
|
23
29
|
display: "grid",
|
|
24
30
|
alignItems: "center",
|
|
25
31
|
justifyItems: "center"
|
|
@@ -28,6 +34,7 @@ function TextImageBlock({
|
|
|
28
34
|
item: true,
|
|
29
35
|
xs: 12,
|
|
30
36
|
sx: {
|
|
37
|
+
p: 1,
|
|
31
38
|
display: "grid",
|
|
32
39
|
alignItems: "center",
|
|
33
40
|
justifyItems: "center"
|
|
@@ -38,12 +45,13 @@ function TextImageBlock({
|
|
|
38
45
|
item: true,
|
|
39
46
|
xs: 6,
|
|
40
47
|
sx: {
|
|
48
|
+
p: 1,
|
|
41
49
|
minHeight: "100vh",
|
|
42
50
|
display: "grid",
|
|
43
51
|
alignItems: "center",
|
|
44
52
|
justifyItems: "center"
|
|
45
53
|
}
|
|
46
|
-
}, /*#__PURE__*/React.createElement(
|
|
54
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
47
55
|
src: image_content.url,
|
|
48
56
|
width: image_content.width,
|
|
49
57
|
height: image_content.height,
|
|
@@ -52,6 +60,7 @@ function TextImageBlock({
|
|
|
52
60
|
item: true,
|
|
53
61
|
xs: image_content?.url !== undefined ? 6 : 12,
|
|
54
62
|
sx: {
|
|
63
|
+
p: 1,
|
|
55
64
|
minHeight: "100vh",
|
|
56
65
|
display: "grid",
|
|
57
66
|
alignItems: "center",
|
|
@@ -61,6 +70,7 @@ function TextImageBlock({
|
|
|
61
70
|
item: true,
|
|
62
71
|
xs: image_content?.url !== undefined ? 6 : 12,
|
|
63
72
|
sx: {
|
|
73
|
+
p: 1,
|
|
64
74
|
minHeight: "100vh",
|
|
65
75
|
display: "grid",
|
|
66
76
|
alignItems: "center",
|
|
@@ -70,12 +80,13 @@ function TextImageBlock({
|
|
|
70
80
|
item: true,
|
|
71
81
|
xs: 6,
|
|
72
82
|
sx: {
|
|
83
|
+
p: 1,
|
|
73
84
|
minHeight: "100vh",
|
|
74
85
|
display: "grid",
|
|
75
86
|
alignItems: "center",
|
|
76
87
|
justifyItems: "center"
|
|
77
88
|
}
|
|
78
|
-
}, /*#__PURE__*/React.createElement(
|
|
89
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
79
90
|
src: image_content.url,
|
|
80
91
|
width: image_content.width,
|
|
81
92
|
height: image_content.height,
|
|
@@ -91,7 +102,8 @@ TextImageBlock.propTypes = {
|
|
|
91
102
|
height: PropTypes.number,
|
|
92
103
|
alt: PropTypes.string
|
|
93
104
|
}),
|
|
94
|
-
reverse: PropTypes.bool
|
|
105
|
+
reverse: PropTypes.bool,
|
|
106
|
+
maxWidth: PropTypes.string
|
|
95
107
|
};
|
|
96
108
|
|
|
97
109
|
export { TextImageBlock as default };
|
package/package.json
CHANGED
|
@@ -2,17 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Grid, Typography } from "@mui/material";
|
|
5
|
-
|
|
5
|
+
import Image from "next/image";
|
|
6
6
|
import { MuiMarkdown } from "mui-markdown";
|
|
7
7
|
import PropTypes from "prop-types";
|
|
8
8
|
|
|
9
|
-
function TextImageBlock({
|
|
9
|
+
function TextImageBlock({
|
|
10
|
+
block_title,
|
|
11
|
+
text_content,
|
|
12
|
+
image_content,
|
|
13
|
+
reverse,
|
|
14
|
+
maxWidth,
|
|
15
|
+
}) {
|
|
10
16
|
reverse = Boolean(reverse);
|
|
11
17
|
|
|
18
|
+
maxWidth = maxWidth || "100%";
|
|
19
|
+
|
|
12
20
|
return (
|
|
13
21
|
<Grid
|
|
14
22
|
container
|
|
15
23
|
sx={[
|
|
24
|
+
{ maxWidth: maxWidth, margin: "auto" },
|
|
16
25
|
text_content === undefined && {
|
|
17
26
|
display: "grid",
|
|
18
27
|
alignItems: "center",
|
|
@@ -25,6 +34,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
|
|
|
25
34
|
item
|
|
26
35
|
xs={12}
|
|
27
36
|
sx={{
|
|
37
|
+
p: 1,
|
|
28
38
|
display: "grid",
|
|
29
39
|
alignItems: "center",
|
|
30
40
|
justifyItems: "center",
|
|
@@ -40,13 +50,14 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
|
|
|
40
50
|
item
|
|
41
51
|
xs={6}
|
|
42
52
|
sx={{
|
|
53
|
+
p: 1,
|
|
43
54
|
minHeight: "100vh",
|
|
44
55
|
display: "grid",
|
|
45
56
|
alignItems: "center",
|
|
46
57
|
justifyItems: "center",
|
|
47
58
|
}}
|
|
48
59
|
>
|
|
49
|
-
<
|
|
60
|
+
<Image
|
|
50
61
|
src={image_content.url}
|
|
51
62
|
width={image_content.width}
|
|
52
63
|
height={image_content.height}
|
|
@@ -59,6 +70,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
|
|
|
59
70
|
item
|
|
60
71
|
xs={image_content?.url !== undefined ? 6 : 12}
|
|
61
72
|
sx={{
|
|
73
|
+
p: 1,
|
|
62
74
|
minHeight: "100vh",
|
|
63
75
|
display: "grid",
|
|
64
76
|
alignItems: "center",
|
|
@@ -76,6 +88,7 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
|
|
|
76
88
|
item
|
|
77
89
|
xs={image_content?.url !== undefined ? 6 : 12}
|
|
78
90
|
sx={{
|
|
91
|
+
p: 1,
|
|
79
92
|
minHeight: "100vh",
|
|
80
93
|
display: "grid",
|
|
81
94
|
alignItems: "center",
|
|
@@ -90,13 +103,14 @@ function TextImageBlock({ block_title, text_content, image_content, reverse }) {
|
|
|
90
103
|
item
|
|
91
104
|
xs={6}
|
|
92
105
|
sx={{
|
|
106
|
+
p: 1,
|
|
93
107
|
minHeight: "100vh",
|
|
94
108
|
display: "grid",
|
|
95
109
|
alignItems: "center",
|
|
96
110
|
justifyItems: "center",
|
|
97
111
|
}}
|
|
98
112
|
>
|
|
99
|
-
<
|
|
113
|
+
<Image
|
|
100
114
|
src={image_content.url}
|
|
101
115
|
width={image_content.width}
|
|
102
116
|
height={image_content.height}
|
|
@@ -120,6 +134,7 @@ TextImageBlock.propTypes = {
|
|
|
120
134
|
alt: PropTypes.string,
|
|
121
135
|
}),
|
|
122
136
|
reverse: PropTypes.bool,
|
|
137
|
+
maxWidth: PropTypes.string,
|
|
123
138
|
};
|
|
124
139
|
|
|
125
140
|
export default TextImageBlock;
|
|
@@ -37,6 +37,7 @@ HelloMars.args = {
|
|
|
37
37
|
text_content:
|
|
38
38
|
"**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface. *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
|
|
39
39
|
reverse: true,
|
|
40
|
+
maxWidth: "1200px",
|
|
40
41
|
};
|
|
41
42
|
|
|
42
43
|
export const NoTitle = Template.bind({});
|
|
@@ -51,6 +52,7 @@ NoTitle.args = {
|
|
|
51
52
|
text_content:
|
|
52
53
|
"**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface. <br /> <br /> *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
|
|
53
54
|
reverse: false,
|
|
55
|
+
maxWidth: "900px",
|
|
54
56
|
};
|
|
55
57
|
|
|
56
58
|
export const NoImage = Template.bind({});
|