umwd-components 0.1.207 → 0.1.209

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/FooterV2.js +46 -53
  2. package/dist/cjs/components/HeroSection.js +4 -4
  3. package/dist/cjs/components/StrapiImage.js +5 -5
  4. package/dist/esm/components/FooterV2.js +47 -54
  5. package/dist/esm/components/HeroSection.js +4 -4
  6. package/dist/esm/components/StrapiImage.js +5 -5
  7. package/package.json +1 -1
  8. package/src/components/FooterV2.tsx +70 -37
  9. package/src/components/HeroSection.tsx +7 -16
  10. package/src/components/StrapiImage.tsx +8 -8
package/dist/cjs/components/FooterV2.js CHANGED
@@ -14,39 +14,44 @@ var material = require('@mui/material');
14
14
  var Link = require('next/link');
15
15
  var Image = require('next/image');
16
16
  var getIcon = require('../lib/getIcon.js');
17
- var PropTypes = require('prop-types');
18
17
  var MuiLink = require('./MuiLink.js');
19
18
 
20
- Footer.propTypes = {
21
- site_title: PropTypes.string.isRequired,
22
- logo: PropTypes.shape({
23
- url: PropTypes.string.isRequired,
24
- width: PropTypes.number.isRequired,
25
- height: PropTypes.number.isRequired,
26
- alternativeText: PropTypes.string
27
- }),
28
- company_name: PropTypes.string.isRequired,
29
- parent_company_name: PropTypes.string,
30
- company_address: PropTypes.shape({
31
- street: PropTypes.string,
32
- street_number: PropTypes.number,
33
- street_number_addition: PropTypes.string,
34
- postal_code: PropTypes.string,
35
- city: PropTypes.string
36
- }),
37
- CoC_number: PropTypes.string.isRequired,
38
- VAT_number: PropTypes.string.isRequired,
39
- company_socials: PropTypes.arrayOf(PropTypes.shape({
40
- name: PropTypes.string.isRequired,
41
- url: PropTypes.string.isRequired,
42
- icon: PropTypes.elementType
43
- })),
44
- disclaimer_link: PropTypes.string,
45
- privacypolicy_link: PropTypes.string,
46
- referal: PropTypes.element
47
- };
19
+ /* Footer.propTypes = {
20
+ site_title: PropTypes.string.isRequired,
21
+ logo: PropTypes.shape({
22
+ url: PropTypes.string.isRequired,
23
+ width: PropTypes.number.isRequired,
24
+ height: PropTypes.number.isRequired,
25
+ alternativeText: PropTypes.string,
26
+ }),
27
+ company_name: PropTypes.string.isRequired,
28
+ parent_company_name: PropTypes.string,
29
+ company_address: PropTypes.shape({
30
+ street: PropTypes.string,
31
+ street_number: PropTypes.number,
32
+ street_number_addition: PropTypes.string,
33
+ postal_code: PropTypes.string,
34
+ city: PropTypes.string,
35
+ }),
36
+ CoC_number: PropTypes.string.isRequired,
37
+ VAT_number: PropTypes.string.isRequired,
38
+ company_socials: PropTypes.arrayOf(
39
+ PropTypes.shape({
40
+ name: PropTypes.string.isRequired,
41
+ url: PropTypes.string.isRequired,
42
+ icon: PropTypes.elementType,
43
+ })
44
+ ),
45
+ disclaimer_link: PropTypes.string,
46
+ privacypolicy_link: PropTypes.string,
47
+ referal: PropTypes.element,
48
+ }; */
49
+
48
50
  function Footer(_ref) {
49
51
  let {
52
+ data
53
+ } = _ref;
54
+ const {
50
55
  site_title,
51
56
  logo,
52
57
  company_name,
@@ -59,7 +64,7 @@ function Footer(_ref) {
59
64
  privacypolicy_link,
60
65
  maxWidth = "lg",
61
66
  referal
62
- } = _ref;
67
+ } = data;
63
68
  const theme = material.useTheme();
64
69
  const APIcon = getIcon.default("APIcon");
65
70
 
@@ -85,9 +90,8 @@ function Footer(_ref) {
85
90
  }, /*#__PURE__*/React.createElement(material.Grid, {
86
91
  item: true,
87
92
  xs: 12,
88
- sm: 12,
89
- md: 4,
90
- align: "center"
93
+ sm: 6,
94
+ md: 4
91
95
  }, /*#__PURE__*/React.createElement(material.Box, {
92
96
  sx: {
93
97
  display: {
@@ -126,8 +130,7 @@ function Footer(_ref) {
126
130
  item: true,
127
131
  xs: 12,
128
132
  sm: 6,
129
- md: 4,
130
- align: "center"
133
+ md: 4
131
134
  }, /*#__PURE__*/React.createElement(material.Typography, {
132
135
  variant: "h6",
133
136
  sx: {
@@ -155,8 +158,7 @@ function Footer(_ref) {
155
158
  item: true,
156
159
  xs: 12,
157
160
  sm: 6,
158
- md: 4,
159
- align: "center"
161
+ md: 4
160
162
  }, company_socials && company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
161
163
  variant: "h6",
162
164
  sx: {
@@ -173,7 +175,7 @@ function Footer(_ref) {
173
175
  const Icon = getIcon.default(company_social.icon);
174
176
  return /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
175
177
  href: company_social.url,
176
- target: "_blank"
178
+ key: index
177
179
  }, /*#__PURE__*/React.createElement(material.IconButton, {
178
180
  key: index,
179
181
  color: "inherit",
@@ -193,25 +195,17 @@ function Footer(_ref) {
193
195
  alignItems: "center",
194
196
  gap: 2,
195
197
  justifyContent: "space-around"
196
- }, disclaimer_link && /*#__PURE__*/React.createElement(Link, {
197
- href: disclaimer_link,
198
- passHref: true,
199
- legacyBehavior: true
200
- }, /*#__PURE__*/React.createElement(material.Link, {
201
- target: "_blank"
198
+ }, disclaimer_link && /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
199
+ href: disclaimer_link
202
200
  }, /*#__PURE__*/React.createElement(material.Typography, {
203
201
  variant: "body1",
204
202
  color: "#ffffff"
205
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(Link, {
206
- href: privacypolicy_link,
207
- passHref: true,
208
- legacyBehavior: true
209
- }, /*#__PURE__*/React.createElement(material.Link, {
210
- target: "_blank"
203
+ }, "Disclaimer")), privacypolicy_link && /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
204
+ href: privacypolicy_link
211
205
  }, /*#__PURE__*/React.createElement(material.Typography, {
212
206
  variant: "body1",
213
207
  color: "#ffffff"
214
- }, "Privacy Policy"))))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
208
+ }, "Privacy Policy")))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
215
209
  item: true,
216
210
  xs: 12
217
211
  }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
@@ -224,8 +218,7 @@ function Footer(_ref) {
224
218
  pb: "50px"
225
219
  }
226
220
  }, referal ? referal : /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
227
- href: "https://atelierpaulus.nl/",
228
- target: "_blank"
221
+ href: "https://atelierpaulus.nl/"
229
222
  }, /*#__PURE__*/React.createElement(material.Typography, {
230
223
  color: "secondary.contrastText",
231
224
  sx: {
package/dist/cjs/components/HeroSection.js CHANGED
@@ -51,7 +51,7 @@ function HeroSection(_ref) {
51
51
  }
52
52
  }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
53
53
  id: (_bgImage$id = bgImage.id) === null || _bgImage$id === void 0 ? void 0 : _bgImage$id.toString(),
54
- alt: "Background",
54
+ alternativeText: "Background",
55
55
  style: {
56
56
  position: "absolute",
57
57
  inset: 0,
@@ -60,7 +60,7 @@ function HeroSection(_ref) {
60
60
  height: "100%"
61
61
  },
62
62
  height: bgImage.height || 1080,
63
- src: bgImage.url,
63
+ url: bgImage.url,
64
64
  width: bgImage.width || 1920
65
65
  }), /*#__PURE__*/React.createElement(material.Container, {
66
66
  maxWidth: maxWidth || "lg",
@@ -84,9 +84,9 @@ function HeroSection(_ref) {
84
84
  className: "manipulator"
85
85
  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
86
86
  id: (_logoImage$id = logoImage.id) === null || _logoImage$id === void 0 ? void 0 : _logoImage$id.toString(),
87
- alt: logoImage.alternativeText,
87
+ alternativeText: logoImage.alternativeText,
88
88
  height: logoImage.height || 100,
89
- src: logoImage.url,
89
+ url: logoImage.url,
90
90
  width: logoImage.width || 100,
91
91
  style: {
92
92
  objectFit: "contain"
package/dist/cjs/components/StrapiImage.js CHANGED
@@ -13,19 +13,19 @@ var utils = require('../lib/utils.js');
13
13
  function StrapiImage(_ref) {
14
14
  let {
15
15
  id,
16
- src,
17
- alt = "",
16
+ url,
17
+ alternativeText = "",
18
18
  height,
19
19
  width,
20
20
  style = {}
21
21
  } = _ref;
22
- if (!src) return null;
23
- const imageUrl = utils.getStrapiMedia(src);
22
+ if (!url) return null;
23
+ const imageUrl = utils.getStrapiMedia(url);
24
24
  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
25
25
  return /*#__PURE__*/React.createElement(Image, {
26
26
  id: id,
27
27
  src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
28
- alt: alt,
28
+ alt: alternativeText,
29
29
  height: height,
30
30
  width: width,
31
31
  style: style
package/dist/esm/components/FooterV2.js CHANGED
@@ -6,43 +6,48 @@
6
6
  */
7
7
 
8
8
  import React__default from 'react';
9
- import { useTheme, AppBar, Container, Toolbar, Grid, Box, Typography, Stack, IconButton, Divider, Link as Link$1 } from '@mui/material';
9
+ import { useTheme, AppBar, Container, Toolbar, Grid, Box, Typography, Stack, IconButton, Divider } from '@mui/material';
10
10
  import Link from 'next/link';
11
11
  import Image from 'next/image';
12
12
  import getIcon from '../lib/getIcon.js';
13
- import PropTypes from 'prop-types';
14
13
  import { MuiLink } from './MuiLink.js';
15
14
 
16
- Footer.propTypes = {
17
- site_title: PropTypes.string.isRequired,
18
- logo: PropTypes.shape({
19
- url: PropTypes.string.isRequired,
20
- width: PropTypes.number.isRequired,
21
- height: PropTypes.number.isRequired,
22
- alternativeText: PropTypes.string
23
- }),
24
- company_name: PropTypes.string.isRequired,
25
- parent_company_name: PropTypes.string,
26
- company_address: PropTypes.shape({
27
- street: PropTypes.string,
28
- street_number: PropTypes.number,
29
- street_number_addition: PropTypes.string,
30
- postal_code: PropTypes.string,
31
- city: PropTypes.string
32
- }),
33
- CoC_number: PropTypes.string.isRequired,
34
- VAT_number: PropTypes.string.isRequired,
35
- company_socials: PropTypes.arrayOf(PropTypes.shape({
36
- name: PropTypes.string.isRequired,
37
- url: PropTypes.string.isRequired,
38
- icon: PropTypes.elementType
39
- })),
40
- disclaimer_link: PropTypes.string,
41
- privacypolicy_link: PropTypes.string,
42
- referal: PropTypes.element
43
- };
15
+ /* Footer.propTypes = {
16
+ site_title: PropTypes.string.isRequired,
17
+ logo: PropTypes.shape({
18
+ url: PropTypes.string.isRequired,
19
+ width: PropTypes.number.isRequired,
20
+ height: PropTypes.number.isRequired,
21
+ alternativeText: PropTypes.string,
22
+ }),
23
+ company_name: PropTypes.string.isRequired,
24
+ parent_company_name: PropTypes.string,
25
+ company_address: PropTypes.shape({
26
+ street: PropTypes.string,
27
+ street_number: PropTypes.number,
28
+ street_number_addition: PropTypes.string,
29
+ postal_code: PropTypes.string,
30
+ city: PropTypes.string,
31
+ }),
32
+ CoC_number: PropTypes.string.isRequired,
33
+ VAT_number: PropTypes.string.isRequired,
34
+ company_socials: PropTypes.arrayOf(
35
+ PropTypes.shape({
36
+ name: PropTypes.string.isRequired,
37
+ url: PropTypes.string.isRequired,
38
+ icon: PropTypes.elementType,
39
+ })
40
+ ),
41
+ disclaimer_link: PropTypes.string,
42
+ privacypolicy_link: PropTypes.string,
43
+ referal: PropTypes.element,
44
+ }; */
45
+
44
46
  function Footer(_ref) {
45
47
  let {
48
+ data
49
+ } = _ref;
50
+ const {
46
51
  site_title,
47
52
  logo,
48
53
  company_name,
@@ -55,7 +60,7 @@ function Footer(_ref) {
55
60
  privacypolicy_link,
56
61
  maxWidth = "lg",
57
62
  referal
58
- } = _ref;
63
+ } = data;
59
64
  const theme = useTheme();
60
65
  const APIcon = getIcon("APIcon");
61
66
 
@@ -81,9 +86,8 @@ function Footer(_ref) {
81
86
  }, /*#__PURE__*/React__default.createElement(Grid, {
82
87
  item: true,
83
88
  xs: 12,
84
- sm: 12,
85
- md: 4,
86
- align: "center"
89
+ sm: 6,
90
+ md: 4
87
91
  }, /*#__PURE__*/React__default.createElement(Box, {
88
92
  sx: {
89
93
  display: {
@@ -122,8 +126,7 @@ function Footer(_ref) {
122
126
  item: true,
123
127
  xs: 12,
124
128
  sm: 6,
125
- md: 4,
126
- align: "center"
129
+ md: 4
127
130
  }, /*#__PURE__*/React__default.createElement(Typography, {
128
131
  variant: "h6",
129
132
  sx: {
@@ -151,8 +154,7 @@ function Footer(_ref) {
151
154
  item: true,
152
155
  xs: 12,
153
156
  sm: 6,
154
- md: 4,
155
- align: "center"
157
+ md: 4
156
158
  }, company_socials && company_socials.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
157
159
  variant: "h6",
158
160
  sx: {
@@ -169,7 +171,7 @@ function Footer(_ref) {
169
171
  const Icon = getIcon(company_social.icon);
170
172
  return /*#__PURE__*/React__default.createElement(MuiLink, {
171
173
  href: company_social.url,
172
- target: "_blank"
174
+ key: index
173
175
  }, /*#__PURE__*/React__default.createElement(IconButton, {
174
176
  key: index,
175
177
  color: "inherit",
@@ -189,25 +191,17 @@ function Footer(_ref) {
189
191
  alignItems: "center",
190
192
  gap: 2,
191
193
  justifyContent: "space-around"
192
- }, disclaimer_link && /*#__PURE__*/React__default.createElement(Link, {
193
- href: disclaimer_link,
194
- passHref: true,
195
- legacyBehavior: true
196
- }, /*#__PURE__*/React__default.createElement(Link$1, {
197
- target: "_blank"
194
+ }, disclaimer_link && /*#__PURE__*/React__default.createElement(MuiLink, {
195
+ href: disclaimer_link
198
196
  }, /*#__PURE__*/React__default.createElement(Typography, {
199
197
  variant: "body1",
200
198
  color: "#ffffff"
201
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React__default.createElement(Link, {
202
- href: privacypolicy_link,
203
- passHref: true,
204
- legacyBehavior: true
205
- }, /*#__PURE__*/React__default.createElement(Link$1, {
206
- target: "_blank"
199
+ }, "Disclaimer")), privacypolicy_link && /*#__PURE__*/React__default.createElement(MuiLink, {
200
+ href: privacypolicy_link
207
201
  }, /*#__PURE__*/React__default.createElement(Typography, {
208
202
  variant: "body1",
209
203
  color: "#ffffff"
210
- }, "Privacy Policy"))))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React__default.createElement(Grid, {
204
+ }, "Privacy Policy")))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React__default.createElement(Grid, {
211
205
  item: true,
212
206
  xs: 12
213
207
  }, /*#__PURE__*/React__default.createElement(Divider, null)), /*#__PURE__*/React__default.createElement(Grid, {
@@ -220,8 +214,7 @@ function Footer(_ref) {
220
214
  pb: "50px"
221
215
  }
222
216
  }, referal ? referal : /*#__PURE__*/React__default.createElement(MuiLink, {
223
- href: "https://atelierpaulus.nl/",
224
- target: "_blank"
217
+ href: "https://atelierpaulus.nl/"
225
218
  }, /*#__PURE__*/React__default.createElement(Typography, {
226
219
  color: "secondary.contrastText",
227
220
  sx: {
package/dist/esm/components/HeroSection.js CHANGED
@@ -49,7 +49,7 @@ function HeroSection(_ref) {
49
49
  }
50
50
  }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
51
51
  id: (_bgImage$id = bgImage.id) === null || _bgImage$id === void 0 ? void 0 : _bgImage$id.toString(),
52
- alt: "Background",
52
+ alternativeText: "Background",
53
53
  style: {
54
54
  position: "absolute",
55
55
  inset: 0,
@@ -58,7 +58,7 @@ function HeroSection(_ref) {
58
58
  height: "100%"
59
59
  },
60
60
  height: bgImage.height || 1080,
61
- src: bgImage.url,
61
+ url: bgImage.url,
62
62
  width: bgImage.width || 1920
63
63
  }), /*#__PURE__*/React__default.createElement(Container, {
64
64
  maxWidth: maxWidth || "lg",
@@ -82,9 +82,9 @@ function HeroSection(_ref) {
82
82
  className: "manipulator"
83
83
  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
84
84
  id: (_logoImage$id = logoImage.id) === null || _logoImage$id === void 0 ? void 0 : _logoImage$id.toString(),
85
- alt: logoImage.alternativeText,
85
+ alternativeText: logoImage.alternativeText,
86
86
  height: logoImage.height || 100,
87
- src: logoImage.url,
87
+ url: logoImage.url,
88
88
  width: logoImage.width || 100,
89
89
  style: {
90
90
  objectFit: "contain"
package/dist/esm/components/StrapiImage.js CHANGED
@@ -11,19 +11,19 @@ import { getStrapiMedia } from '../lib/utils.js';
11
11
  function StrapiImage(_ref) {
12
12
  let {
13
13
  id,
14
- src,
15
- alt = "",
14
+ url,
15
+ alternativeText = "",
16
16
  height,
17
17
  width,
18
18
  style = {}
19
19
  } = _ref;
20
- if (!src) return null;
21
- const imageUrl = getStrapiMedia(src);
20
+ if (!url) return null;
21
+ const imageUrl = getStrapiMedia(url);
22
22
  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
23
23
  return /*#__PURE__*/React__default.createElement(Image, {
24
24
  id: id,
25
25
  src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
26
- alt: alt,
26
+ alt: alternativeText,
27
27
  height: height,
28
28
  width: width,
29
29
  style: style
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.207",
3
+ "version": "0.1.209",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FooterV2.tsx CHANGED
@@ -12,18 +12,20 @@ import {
12
12
  Grid,
13
13
  Divider,
14
14
  Stack,
15
- Link,
16
15
  useTheme,
17
16
  } from "@mui/material";
18
17
  import NextLink from "next/link";
19
- import { Link as MUILink } from "@mui/material";
18
+ // import { Link as MUILink } from "@mui/material";
20
19
  import Image from "next/image";
21
20
  import getIcon from "../lib/getIcon.ts";
22
21
 
23
22
  import PropTypes from "prop-types";
24
23
  import { MuiLink } from "./MuiLink.tsx";
24
+ import { type ReactNode } from "react";
25
+ import { type SxProps } from "@mui/system";
26
+ import { type StrapiImageProps } from "./StrapiImage.tsx";
25
27
 
26
- Footer.propTypes = {
28
+ /* Footer.propTypes = {
27
29
  site_title: PropTypes.string.isRequired,
28
30
  logo: PropTypes.shape({
29
31
  url: PropTypes.string.isRequired,
@@ -52,22 +54,57 @@ Footer.propTypes = {
52
54
  disclaimer_link: PropTypes.string,
53
55
  privacypolicy_link: PropTypes.string,
54
56
  referal: PropTypes.element,
55
- };
57
+ }; */
58
+
59
+ interface company_address {
60
+ street: string;
61
+ street_number: number;
62
+ street_number_addition?: string;
63
+ postal_code: string;
64
+ city: string;
65
+ country?: string;
66
+ }
67
+
68
+ type company_socials = {
69
+ name: string;
70
+ url: string;
71
+ icon: string;
72
+ }[];
73
+
74
+ type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
75
+
76
+ interface FooterProps {
77
+ site_title: string | ReactNode;
78
+ logo?: StrapiImageProps;
79
+ company_name: string;
80
+ parent_company_name?: string;
81
+ company_address: company_address;
82
+ CoC_number: string;
83
+ VAT_number: string;
84
+ company_socials: company_socials;
85
+ disclaimer_link: string;
86
+ privacypolicy_link: string;
87
+ maxWidth?: MaxWidth;
88
+ referal: ReactNode;
89
+ // sx?: SxProps<Theme>;
90
+ }
91
+
92
+ function Footer({ data }: { readonly data: FooterProps }) {
93
+ const {
94
+ site_title,
95
+ logo,
96
+ company_name,
97
+ parent_company_name,
98
+ company_address,
99
+ CoC_number,
100
+ VAT_number,
101
+ company_socials,
102
+ disclaimer_link,
103
+ privacypolicy_link,
104
+ maxWidth = "lg",
105
+ referal,
106
+ } = data;
56
107
 
57
- function Footer({
58
- site_title,
59
- logo,
60
- company_name,
61
- parent_company_name,
62
- company_address,
63
- CoC_number,
64
- VAT_number,
65
- company_socials,
66
- disclaimer_link,
67
- privacypolicy_link,
68
- maxWidth = "lg",
69
- referal,
70
- }) {
71
108
  const theme = useTheme();
72
109
 
73
110
  const APIcon = getIcon("APIcon");
@@ -89,7 +126,7 @@ function Footer({
89
126
  <Container maxWidth={maxWidth}>
90
127
  <Toolbar disableGutters>
91
128
  <Grid container sx={{ p: 2 }} spacing={2}>
92
- <Grid item xs={12} sm={12} md={4} align="center">
129
+ <Grid item xs={12} sm={6} md={4}>
93
130
  <Box
94
131
  sx={{
95
132
  display: { xs: "none", md: "flex" },
@@ -127,7 +164,7 @@ function Footer({
127
164
  )}
128
165
  </Box>
129
166
  </Grid>
130
- <Grid item xs={12} sm={6} md={4} align="center">
167
+ <Grid item xs={12} sm={6} md={4}>
131
168
  <Typography variant="h6" sx={{ mb: 2 }}>
132
169
  Contact Information
133
170
  </Typography>
@@ -158,7 +195,7 @@ function Footer({
158
195
  <Typography variant="body1"></Typography>
159
196
  <Typography variant="body1"></Typography>
160
197
  </Grid>
161
- <Grid item xs={12} sm={6} md={4} align="center">
198
+ <Grid item xs={12} sm={6} md={4}>
162
199
  {company_socials && company_socials.length > 0 && (
163
200
  <>
164
201
  <Typography variant="h6" sx={{ mb: 2 }}>
@@ -175,7 +212,7 @@ function Footer({
175
212
  {company_socials.map((company_social, index) => {
176
213
  const Icon = getIcon(company_social.icon);
177
214
  return (
178
- <MuiLink href={company_social.url} target="_blank">
215
+ <MuiLink href={company_social.url} key={index}>
179
216
  <IconButton key={index} color="inherit" size="large">
180
217
  {Icon !== null && <Icon />}
181
218
  </IconButton>
@@ -198,22 +235,18 @@ function Footer({
198
235
  justifyContent={"space-around"}
199
236
  >
200
237
  {disclaimer_link && (
201
- <NextLink href={disclaimer_link} passHref legacyBehavior>
202
- <MUILink target="_blank">
203
- <Typography variant="body1" color="#ffffff">
204
- Disclaimer
205
- </Typography>
206
- </MUILink>
207
- </NextLink>
238
+ <MuiLink href={disclaimer_link}>
239
+ <Typography variant="body1" color="#ffffff">
240
+ Disclaimer
241
+ </Typography>
242
+ </MuiLink>
208
243
  )}
209
244
  {privacypolicy_link && (
210
- <NextLink href={privacypolicy_link} passHref legacyBehavior>
211
- <MUILink target="_blank">
212
- <Typography variant="body1" color="#ffffff">
213
- Privacy Policy
214
- </Typography>
215
- </MUILink>
216
- </NextLink>
245
+ <MuiLink href={privacypolicy_link}>
246
+ <Typography variant="body1" color="#ffffff">
247
+ Privacy Policy
248
+ </Typography>
249
+ </MuiLink>
217
250
  )}
218
251
  </Stack>
219
252
  </Grid>
@@ -250,7 +283,7 @@ function Footer({
250
283
  {referal ? (
251
284
  referal
252
285
  ) : (
253
- <MuiLink href="https://atelierpaulus.nl/" target="_blank">
286
+ <MuiLink href="https://atelierpaulus.nl/">
254
287
  <Typography
255
288
  color="secondary.contrastText"
256
289
  sx={{
package/src/components/HeroSection.tsx CHANGED
@@ -9,21 +9,12 @@ import {
9
9
  Paper,
10
10
  useTheme,
11
11
  } from "@mui/material";
12
- import { StrapiImage } from "./StrapiImage.tsx";
12
+ import { StrapiImage, type StrapiImageProps } from "./StrapiImage.tsx";
13
13
  import { setOpacity } from "../lib/utils.ts";
14
14
  import { SxProps, Theme } from "@mui/material/styles";
15
15
 
16
16
  type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
17
17
 
18
- interface ImageProps {
19
- id: number;
20
- url: string;
21
- alternativeText: string;
22
- style: React.CSSProperties;
23
- width: number;
24
- height: number;
25
- }
26
-
27
18
  interface LinkProps {
28
19
  id: number;
29
20
  url: string;
@@ -36,8 +27,8 @@ interface HeroSectionProps {
36
27
  __component: string;
37
28
  heading: string;
38
29
  subHeading: string;
39
- bgImage?: ImageProps;
40
- logoImage?: ImageProps;
30
+ bgImage?: StrapiImageProps;
31
+ logoImage?: StrapiImageProps;
41
32
  link: LinkProps;
42
33
  maxWidth?: MaxWidth;
43
34
  sx?: SxProps<Theme>;
@@ -79,7 +70,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
79
70
  {bgImage && (
80
71
  <StrapiImage
81
72
  id={bgImage.id?.toString()}
82
- alt="Background"
73
+ alternativeText="Background"
83
74
  style={{
84
75
  position: "absolute",
85
76
  inset: 0,
@@ -88,7 +79,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
88
79
  height: "100%",
89
80
  }}
90
81
  height={bgImage.height || 1080}
91
- src={bgImage.url}
82
+ url={bgImage.url}
92
83
  width={bgImage.width || 1920}
93
84
  />
94
85
  )}
@@ -110,9 +101,9 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
110
101
  <Box className="manipulator">
111
102
  <StrapiImage
112
103
  id={logoImage.id?.toString()}
113
- alt={logoImage.alternativeText}
104
+ alternativeText={logoImage.alternativeText}
114
105
  height={logoImage.height || 100}
115
- src={logoImage.url}
106
+ url={logoImage.url}
116
107
  width={logoImage.width || 100}
117
108
  style={{
118
109
  objectFit: "contain",
package/src/components/StrapiImage.tsx CHANGED
@@ -2,10 +2,10 @@ import React from "react";
2
2
  import Image from "next/image";
3
3
  import { getStrapiMedia } from "../lib/utils.ts";
4
4
 
5
- interface StrapiImageProps {
5
+ export interface StrapiImageProps {
6
6
  id: string;
7
- src: string;
8
- alt: string;
7
+ url: string;
8
+ alternativeText: string;
9
9
  height: number;
10
10
  width: number;
11
11
  style?: React.CSSProperties;
@@ -13,21 +13,21 @@ interface StrapiImageProps {
13
13
 
14
14
  export function StrapiImage({
15
15
  id,
16
- src,
17
- alt = "",
16
+ url,
17
+ alternativeText = "",
18
18
  height,
19
19
  width,
20
20
  style = {},
21
21
  }: Readonly<StrapiImageProps>) {
22
- if (!src) return null;
23
- const imageUrl = getStrapiMedia(src);
22
+ if (!url) return null;
23
+ const imageUrl = getStrapiMedia(url);
24
24
  const imageFallback = `https://placehold.co/${width}x${height}`;
25
25
 
26
26
  return (
27
27
  <Image
28
28
  id={id}
29
29
  src={imageUrl ?? imageFallback}
30
- alt={alt}
30
+ alt={alternativeText}
31
31
  height={height}
32
32
  width={width}
33
33
  style={style}