umwd-components 0.1.225 → 0.1.227

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 (12) hide show
  1. package/dist/cjs/components/dashboard/{Sidebar.js → SideNav.js} +2 -2
  2. package/dist/cjs/index.js +2 -2
  3. package/dist/esm/components/dashboard/{Sidebar.js → SideNav.js} +2 -2
  4. package/dist/esm/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/dashboard/{Sidebar.tsx → SideNav.tsx} +5 -5
  7. package/src/index.js +1 -1
  8. package/src/stories/{SideBar.stories.js → SideNav.stories.js} +5 -5
  9. package/dist/cjs/components/FluidBackground.js +0 -257
  10. package/dist/cjs/components/Footer.js +0 -245
  11. package/dist/esm/components/FluidBackground.js +0 -253
  12. package/dist/esm/components/Footer.js +0 -241
package/dist/cjs/components/dashboard/{Sidebar.js → SideNav.js} RENAMED
@@ -49,7 +49,7 @@ const DrawerHeader = material.styled("div")(_ref => {
49
49
  ...theme.mixins.toolbar
50
50
  };
51
51
  });
52
- function Sidebar(_ref2) {
52
+ function SideNav(_ref2) {
53
53
  let {
54
54
  children,
55
55
  data
@@ -217,4 +217,4 @@ function Sidebar(_ref2) {
217
217
  }, /*#__PURE__*/React__namespace.createElement(DrawerHeader, null), children));
218
218
  }
219
219
 
220
- exports.default = Sidebar;
220
+ exports.default = SideNav;
package/dist/cjs/index.js CHANGED
@@ -21,7 +21,7 @@ var ScrollNavbar = require('./components/ScrollNavbar.js');
21
21
  var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
22
22
  var RegisterForm = require('./components/forms/RegisterForm.js');
23
23
  var SigninForm = require('./components/forms/SigninForm.js');
24
- var Sidebar = require('./components/dashboard/Sidebar.js');
24
+ var SideNav = require('./components/dashboard/SideNav.js');
25
25
 
26
26
 
27
27
 
@@ -40,4 +40,4 @@ exports.ScrollNavbar = ScrollNavbar.default;
40
40
  exports.FluidBackground = FluidBackgroundV2.default;
41
41
  exports.RegisterForm = RegisterForm.default;
42
42
  exports.SigninForm = SigninForm.default;
43
- exports.Sidebar = Sidebar.default;
43
+ exports.SideNav = SideNav.default;
package/dist/esm/components/dashboard/{Sidebar.js → SideNav.js} RENAMED
@@ -26,7 +26,7 @@ const DrawerHeader = styled("div")(_ref => {
26
26
  ...theme.mixins.toolbar
27
27
  };
28
28
  });
29
- function Sidebar(_ref2) {
29
+ function SideNav(_ref2) {
30
30
  let {
31
31
  children,
32
32
  data
@@ -194,4 +194,4 @@ function Sidebar(_ref2) {
194
194
  }, /*#__PURE__*/React.createElement(DrawerHeader, null), children));
195
195
  }
196
196
 
197
- export { Sidebar as default };
197
+ export { SideNav as default };
package/dist/esm/index.js CHANGED
@@ -19,4 +19,4 @@ export { default as ScrollNavbar } from './components/ScrollNavbar.js';
19
19
  export { default as FluidBackground } from './components/FluidBackgroundV2.js';
20
20
  export { default as RegisterForm } from './components/forms/RegisterForm.js';
21
21
  export { default as SigninForm } from './components/forms/SigninForm.js';
22
- export { default as Sidebar } from './components/dashboard/Sidebar.js';
22
+ export { default as SideNav } from './components/dashboard/SideNav.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.225",
3
+ "version": "0.1.227",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/dashboard/{Sidebar.tsx → SideNav.tsx} RENAMED
@@ -6,7 +6,7 @@ import {
6
6
  useTheme,
7
7
  Box,
8
8
  Divider,
9
- // CssBaseline,
9
+ /* CssBaseline, */
10
10
  Typography,
11
11
  Toolbar,
12
12
  IconButton,
@@ -40,7 +40,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({
40
40
  ...theme.mixins.toolbar,
41
41
  }));
42
42
 
43
- interface SidebarProps {
43
+ interface SideNavProps {
44
44
  title: string;
45
45
  sections: Array<{
46
46
  title: string;
@@ -55,11 +55,11 @@ interface SidebarProps {
55
55
  sx?: SxProps<Theme>;
56
56
  }
57
57
 
58
- function Sidebar({
58
+ function SideNav({
59
59
  children,
60
60
  data,
61
61
  }: Readonly<{
62
- data: SidebarProps;
62
+ data: SideNavProps;
63
63
  children: React.ReactNode;
64
64
  }>): React.JSX.Element {
65
65
  const { sections = [], actions = [], sx = {}, title } = data;
@@ -245,4 +245,4 @@ function Sidebar({
245
245
  );
246
246
  }
247
247
 
248
- export default Sidebar;
248
+ export default SideNav;
package/src/index.js CHANGED
@@ -13,4 +13,4 @@ export { default as ScrollNavbar } from "./components/ScrollNavbar.tsx";
13
13
  export { default as FluidBackground } from "./components/FluidBackgroundV2.tsx";
14
14
  export { default as RegisterForm } from "./components/forms/RegisterForm.tsx";
15
15
  export { default as SigninForm } from "./components/forms/SigninForm.tsx";
16
- export { default as Sidebar } from "./components/dashboard/Sidebar.tsx";
16
+ export { default as SideNav } from "./components/dashboard/SideNav.tsx";
package/src/stories/{SideBar.stories.js → SideNav.stories.js} RENAMED
@@ -1,4 +1,4 @@
1
- import Sidebar from "../components/dashboard/Sidebar.tsx";
1
+ import SideNav from "../components/dashboard/SideNav.tsx";
2
2
  import React from "react";
3
3
  import AccountBoxIcon from "@mui/icons-material/AccountBox";
4
4
  import DashboardIcon from "@mui/icons-material/Dashboard";
@@ -6,14 +6,14 @@ import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
6
6
  import LogoutIcon from "@mui/icons-material/Logout";
7
7
 
8
8
  export default {
9
- title: "UMWD/Sidebar",
10
- component: Sidebar,
9
+ title: "UMWD/SideNav",
10
+ component: SideNav,
11
11
  };
12
12
 
13
13
  const Template = ({ ...args }) => (
14
- <Sidebar data={{ ...args }}>
14
+ <SideNav data={{ ...args }}>
15
15
  <h1>Children</h1>
16
- </Sidebar>
16
+ </SideNav>
17
17
  );
18
18
 
19
19
  export const HelloWorld = Template.bind({});
package/dist/cjs/components/FluidBackground.js DELETED
@@ -1,257 +0,0 @@
1
- "use client";
2
- /*
3
- * UMWD-Components
4
- * @copyright Jelle Paulus
5
- * @license MIT
6
- */
7
-
8
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var React = require('react');
13
- var material = require('@mui/material');
14
-
15
- function FluidBackground() {
16
- const [objectX, setObjectX] = React.useState(0);
17
- const [objectY, setObjectY] = React.useState(0);
18
- const [brightness, setBrightness] = React.useState(1);
19
- const maxBrightness = 1.5;
20
- const minBrightness = 0.5;
21
- const [ObjectSize, setObjectSize] = React.useState(300);
22
- const [minSize, setMinSize] = React.useState(0);
23
- const [maxSize, setMaxSize] = React.useState(0);
24
- const theme = material.useTheme();
25
- let transitionInterval = null;
26
- const handleMove = (x, y) => {
27
- setObjectX(x);
28
- setObjectY(y);
29
- };
30
- const handleStart = () => {
31
- const duration = 3000; // duration in milliseconds
32
- const steps = 180; // number of steps for the transition
33
- const stepDuration = duration / steps; // duration of each step
34
-
35
- let currentBrightness = brightness;
36
- let targetBrightness = maxBrightness;
37
- let currentSize = ObjectSize;
38
- let targetSize = minSize;
39
- let step = 0;
40
-
41
- // Clear any existing transition interval
42
- if (transitionInterval) {
43
- clearInterval(transitionInterval);
44
- }
45
- transitionInterval = setInterval(() => {
46
- step++;
47
- currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
48
- currentSize = currentSize - (currentSize - targetSize) / steps;
49
- setBrightness(currentBrightness);
50
- setObjectSize(currentSize);
51
- if (step === steps) {
52
- if (transitionInterval) {
53
- clearInterval(transitionInterval);
54
- }
55
- }
56
- }, stepDuration);
57
- };
58
- const handleEnd = () => {
59
- const duration = 3000; // duration in milliseconds
60
- const steps = 180; // number of steps for the transition
61
- const stepDuration = duration / steps; // duration of each step
62
-
63
- let currentBrightness = brightness;
64
- let targetBrightness = minBrightness;
65
- let currentSize = ObjectSize;
66
- let targetSize = maxSize;
67
- let step = 0;
68
-
69
- // Clear any existing transition interval
70
- if (transitionInterval) {
71
- clearInterval(transitionInterval);
72
- }
73
- transitionInterval = setInterval(() => {
74
- step++;
75
- currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
76
- currentSize = currentSize - (currentSize - targetSize) / steps;
77
- setBrightness(currentBrightness);
78
- setObjectSize(currentSize);
79
- if (step === steps) {
80
- if (transitionInterval) {
81
- clearInterval(transitionInterval);
82
- }
83
- }
84
- }, stepDuration);
85
- };
86
- React.useEffect(() => {
87
- setObjectX(window.innerWidth / 2);
88
- setObjectY(window.innerHeight / 2);
89
- setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
90
- setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
91
- setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
92
- }, []);
93
- React.useEffect(() => {
94
- const handleEndEvent = () => {
95
- handleEnd();
96
- };
97
- const handleStartEvent = () => {
98
- handleStart();
99
- };
100
- const handleMoveEvent = e => {
101
- const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
102
- const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
103
- handleMove(x, y);
104
- };
105
- window.addEventListener("touchend", handleEndEvent);
106
- window.addEventListener("mouseup", handleEndEvent);
107
- window.addEventListener("touchstart", handleStartEvent);
108
- window.addEventListener("mousedown", handleStartEvent);
109
- window.addEventListener("touchmove", handleMoveEvent);
110
- window.addEventListener("mousemove", handleMoveEvent);
111
- return () => {
112
- window.removeEventListener("touchend", handleEndEvent);
113
- window.removeEventListener("mouseup", handleEndEvent);
114
- window.removeEventListener("touchstart", handleStartEvent);
115
- window.removeEventListener("mousedown", handleStartEvent);
116
- window.removeEventListener("touchmove", handleMoveEvent);
117
- window.removeEventListener("mousemove", handleMoveEvent);
118
- };
119
- }, [minSize, maxSize]);
120
- return /*#__PURE__*/React.createElement("div", {
121
- style: {
122
- position: "fixed",
123
- top: 0,
124
- left: 0,
125
- width: "100vw",
126
- height: "100vh",
127
- zIndex: -1,
128
- pointerEvents: "none",
129
- isolation: "isolate"
130
- }
131
- }, /*#__PURE__*/React.createElement("div", {
132
- id: "background",
133
- style: {
134
- position: "absolute",
135
- top: 0,
136
- left: 0,
137
- display: "Block",
138
- width: "100%",
139
- height: "100%",
140
- background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
141
- zIndex: -1
142
- }
143
- }), /*#__PURE__*/React.createElement("svg", {
144
- id: "object",
145
- width: "".concat(ObjectSize, "px"),
146
- height: "".concat(ObjectSize, "px"),
147
- style: {
148
- position: "absolute",
149
- top: "".concat(objectY, "px"),
150
- left: "".concat(objectX, "px"),
151
- transform: "translate(-50%, -50%)"
152
- }
153
- }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
154
- id: "radial-gradient-mask"
155
- }, /*#__PURE__*/React.createElement("radialGradient", {
156
- id: "gradient",
157
- cx: "50%",
158
- cy: "50%",
159
- r: "50%",
160
- fx: "50%",
161
- fy: "50%"
162
- }, /*#__PURE__*/React.createElement("stop", {
163
- offset: "0%",
164
- stopColor: "white"
165
- }), /*#__PURE__*/React.createElement("stop", {
166
- offset: "100%",
167
- stopColor: "black"
168
- })), /*#__PURE__*/React.createElement("rect", {
169
- width: "100%",
170
- height: "100%",
171
- fill: "url(#gradient)"
172
- }))), /*#__PURE__*/React.createElement("rect", {
173
- width: "100%",
174
- height: "100%",
175
- fill: theme.palette.primary.main,
176
- mask: "url(#radial-gradient-mask)",
177
- style: {
178
- filter: "brightness(".concat(brightness, ")")
179
- }
180
- })), /*#__PURE__*/React.createElement("svg", {
181
- id: "foreground",
182
- style: {
183
- position: "absolute"
184
- },
185
- preserveAspectRatio: "xMidYMid slice",
186
- width: "100%",
187
- height: "100%",
188
- viewBox: "0 0 7680 4320 "
189
- }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
190
- id: "mask"
191
- }, /*#__PURE__*/React.createElement("rect", {
192
- width: "100%",
193
- height: "100%",
194
- fill: "white"
195
- }), /*#__PURE__*/React.createElement("text", {
196
- transform: "translate(-1000 200) rotate(-15)",
197
- style: {
198
- fill: "#000",
199
- fontFamily: "Merriweather-Bold, Merriweather",
200
- fontSize: "360px",
201
- fontWeight: 700,
202
- letterSpacing: ".055em"
203
- }
204
- }, /*#__PURE__*/React.createElement("tspan", {
205
- x: "0",
206
- y: "0"
207
- }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React.createElement("tspan", {
208
- x: "0",
209
- y: "432"
210
- }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React.createElement("tspan", {
211
- x: "0",
212
- y: "864"
213
- }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React.createElement("tspan", {
214
- x: "0",
215
- y: "1296"
216
- }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React.createElement("tspan", {
217
- x: "0",
218
- y: "1728"
219
- }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
220
- x: "0",
221
- y: "2160"
222
- }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React.createElement("tspan", {
223
- x: "0",
224
- y: "2592"
225
- }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
226
- x: "0",
227
- y: "3024"
228
- }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React.createElement("tspan", {
229
- x: "0",
230
- y: "3456"
231
- }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React.createElement("tspan", {
232
- x: "0",
233
- y: "3888"
234
- }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React.createElement("tspan", {
235
- x: "0",
236
- y: "4320"
237
- }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React.createElement("tspan", {
238
- x: "0",
239
- y: "4752"
240
- }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React.createElement("tspan", {
241
- x: "0",
242
- y: "5184"
243
- }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React.createElement("tspan", {
244
- x: "0",
245
- y: "5616"
246
- }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React.createElement("tspan", {
247
- x: "0",
248
- y: "6048"
249
- }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
250
- width: "100%",
251
- height: "100%",
252
- fill: theme.palette.mode === "dark" ? "#222" : "#fff",
253
- mask: "url(#mask)"
254
- })));
255
- }
256
-
257
- exports.default = FluidBackground;
package/dist/cjs/components/Footer.js DELETED
@@ -1,245 +0,0 @@
1
- "use client";
2
- /*
3
- * UMWD-Components
4
- * @copyright Jelle Paulus
5
- * @license MIT
6
- */
7
-
8
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var React = require('react');
13
- var material = require('@mui/material');
14
- var Link = require('next/link');
15
- var Image = require('next/image');
16
- var getIcon = require('../lib/getIcon.js');
17
- var PropTypes = require('prop-types');
18
- var MuiLink = require('./MuiLink.js');
19
-
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
- };
48
- function Footer(_ref) {
49
- let {
50
- site_title,
51
- logo,
52
- company_name,
53
- parent_company_name,
54
- company_address,
55
- CoC_number,
56
- VAT_number,
57
- company_socials,
58
- disclaimer_link,
59
- privacypolicy_link,
60
- maxWidth = "lg",
61
- referal
62
- } = _ref;
63
- const theme = material.useTheme();
64
- const APIcon = getIcon.default("APIcon");
65
- return /*#__PURE__*/React.createElement(material.AppBar, {
66
- position: "relative",
67
- sx: {
68
- backgroundColor: theme.palette.mode === "light" ? theme.palette.primary.light : theme.palette.primary.dark
69
- }
70
- }, /*#__PURE__*/React.createElement(material.Container, {
71
- maxWidth: maxWidth
72
- }, /*#__PURE__*/React.createElement(material.Toolbar, {
73
- disableGutters: true
74
- }, /*#__PURE__*/React.createElement(material.Grid, {
75
- container: true,
76
- sx: {
77
- p: 2
78
- },
79
- spacing: 2
80
- }, /*#__PURE__*/React.createElement(material.Grid, {
81
- item: true,
82
- xs: 12,
83
- sm: 12,
84
- md: 4,
85
- align: "center"
86
- }, /*#__PURE__*/React.createElement(material.Box, {
87
- sx: {
88
- display: {
89
- xs: "none",
90
- md: "flex"
91
- },
92
- cursor: "pointer",
93
- flexDirection: "column",
94
- alignItems: "center",
95
- justifyContent: "flex-start",
96
- height: "100%",
97
- textDecoration: "none"
98
- }
99
- }, /*#__PURE__*/React.createElement(material.Typography, {
100
- variant: "h6",
101
- color: "#ffffff",
102
- sx: {
103
- mb: 2
104
- }
105
- }, site_title), logo && /*#__PURE__*/React.createElement(Link, {
106
- href: "#home"
107
- }, /*#__PURE__*/React.createElement(material.Box, {
108
- sx: {
109
- display: "flex",
110
- alignItems: "center",
111
- justifyContent: "center",
112
- height: "100%",
113
- p: 1
114
- }
115
- }, /*#__PURE__*/React.createElement(Image, {
116
- src: logo.url,
117
- width: logo.width || 100,
118
- height: logo.height || 100,
119
- alt: logo.alternativeText || "site logo"
120
- }))))), /*#__PURE__*/React.createElement(material.Grid, {
121
- item: true,
122
- xs: 12,
123
- sm: 6,
124
- md: 4,
125
- align: "center"
126
- }, /*#__PURE__*/React.createElement(material.Typography, {
127
- variant: "h6",
128
- sx: {
129
- mb: 2
130
- }
131
- }, "Contact Information"), /*#__PURE__*/React.createElement(material.Typography, {
132
- variant: "h6"
133
- }, company_name), parent_company_name && /*#__PURE__*/React.createElement(material.Typography, {
134
- variant: "h6"
135
- }, "By ", parent_company_name), company_address && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
136
- variant: "body1"
137
- }, company_address.street, " ", company_address.street_number, " ", company_address.street_number_addition && company_address.street_number_addition), /*#__PURE__*/React.createElement(material.Typography, {
138
- variant: "body1"
139
- }, company_address.postal_code, " ", company_address.city), /*#__PURE__*/React.createElement(material.Typography, {
140
- variant: "body1"
141
- }, company_address.country)), /*#__PURE__*/React.createElement(material.Typography, {
142
- variant: "body1"
143
- }, "CoC: ", CoC_number), /*#__PURE__*/React.createElement(material.Typography, {
144
- variant: "body1"
145
- }, "VAT: ", VAT_number), /*#__PURE__*/React.createElement(material.Typography, {
146
- variant: "body1"
147
- }), /*#__PURE__*/React.createElement(material.Typography, {
148
- variant: "body1"
149
- })), /*#__PURE__*/React.createElement(material.Grid, {
150
- item: true,
151
- xs: 12,
152
- sm: 6,
153
- md: 4,
154
- align: "center"
155
- }, company_socials && company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
156
- variant: "h6",
157
- sx: {
158
- mb: 2
159
- }
160
- }, "Socials"), /*#__PURE__*/React.createElement(material.Stack, {
161
- spacing: 2,
162
- sx: {
163
- width: "min-content",
164
- color: "primary.contrastText",
165
- alignContent: "space-between"
166
- }
167
- }, company_socials.map((company_social, index) => {
168
- const Icon = getIcon.default(company_social.icon);
169
- return /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
170
- href: company_social.url,
171
- target: "_blank"
172
- }, /*#__PURE__*/React.createElement(material.IconButton, {
173
- key: index,
174
- color: "inherit",
175
- size: "large"
176
- }, Icon !== null && /*#__PURE__*/React.createElement(Icon, null)));
177
- })))), /*#__PURE__*/React.createElement(material.Grid, {
178
- item: true,
179
- xs: 12
180
- }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
181
- item: true,
182
- xs: 12
183
- }, /*#__PURE__*/React.createElement(material.Stack, {
184
- direction: {
185
- xs: "column",
186
- sm: "row"
187
- },
188
- alignItems: "center",
189
- gap: 2,
190
- justifyContent: "space-around"
191
- }, disclaimer_link && /*#__PURE__*/React.createElement(Link, {
192
- href: disclaimer_link,
193
- passHref: true,
194
- legacyBehavior: true
195
- }, /*#__PURE__*/React.createElement(material.Link, {
196
- target: "_blank"
197
- }, /*#__PURE__*/React.createElement(material.Typography, {
198
- variant: "body1",
199
- color: "#ffffff"
200
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(Link, {
201
- href: privacypolicy_link,
202
- passHref: true,
203
- legacyBehavior: true
204
- }, /*#__PURE__*/React.createElement(material.Link, {
205
- target: "_blank"
206
- }, /*#__PURE__*/React.createElement(material.Typography, {
207
- variant: "body1",
208
- color: "#ffffff"
209
- }, "Privacy Policy"))))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
210
- item: true,
211
- xs: 12
212
- }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
213
- item: true,
214
- xs: 12,
215
- sx: {
216
- display: "flex",
217
- justifyContent: "center",
218
- alignItems: "center",
219
- pb: "50px"
220
- }
221
- }, referal ? referal : /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
222
- href: "https://atelierpaulus.nl/",
223
- target: "_blank"
224
- }, /*#__PURE__*/React.createElement(material.Typography, {
225
- color: "secondary.contrastText",
226
- sx: {
227
- textDecoration: "underline",
228
- verticalAlign: "middle",
229
- display: "flex",
230
- alignItems: "center",
231
- justifyContent: "center",
232
- flexDirection: {
233
- xs: "column",
234
- sm: "row"
235
- },
236
- gap: 2
237
- }
238
- }, "Design & Webdevelopment", APIcon !== null && /*#__PURE__*/React.createElement(APIcon, {
239
- sx: {
240
- mx: 2
241
- }
242
- }), "Atelier Paulus")))))));
243
- }
244
-
245
- exports.default = Footer;
package/dist/esm/components/FluidBackground.js DELETED
@@ -1,253 +0,0 @@
1
- "use client";
2
- /*
3
- * UMWD-Components
4
- * @copyright Jelle Paulus
5
- * @license MIT
6
- */
7
-
8
- import React__default, { useState, useEffect } from 'react';
9
- import { useTheme } from '@mui/material';
10
-
11
- function FluidBackground() {
12
- const [objectX, setObjectX] = useState(0);
13
- const [objectY, setObjectY] = useState(0);
14
- const [brightness, setBrightness] = useState(1);
15
- const maxBrightness = 1.5;
16
- const minBrightness = 0.5;
17
- const [ObjectSize, setObjectSize] = useState(300);
18
- const [minSize, setMinSize] = useState(0);
19
- const [maxSize, setMaxSize] = useState(0);
20
- const theme = useTheme();
21
- let transitionInterval = null;
22
- const handleMove = (x, y) => {
23
- setObjectX(x);
24
- setObjectY(y);
25
- };
26
- const handleStart = () => {
27
- const duration = 3000; // duration in milliseconds
28
- const steps = 180; // number of steps for the transition
29
- const stepDuration = duration / steps; // duration of each step
30
-
31
- let currentBrightness = brightness;
32
- let targetBrightness = maxBrightness;
33
- let currentSize = ObjectSize;
34
- let targetSize = minSize;
35
- let step = 0;
36
-
37
- // Clear any existing transition interval
38
- if (transitionInterval) {
39
- clearInterval(transitionInterval);
40
- }
41
- transitionInterval = setInterval(() => {
42
- step++;
43
- currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
44
- currentSize = currentSize - (currentSize - targetSize) / steps;
45
- setBrightness(currentBrightness);
46
- setObjectSize(currentSize);
47
- if (step === steps) {
48
- if (transitionInterval) {
49
- clearInterval(transitionInterval);
50
- }
51
- }
52
- }, stepDuration);
53
- };
54
- const handleEnd = () => {
55
- const duration = 3000; // duration in milliseconds
56
- const steps = 180; // number of steps for the transition
57
- const stepDuration = duration / steps; // duration of each step
58
-
59
- let currentBrightness = brightness;
60
- let targetBrightness = minBrightness;
61
- let currentSize = ObjectSize;
62
- let targetSize = maxSize;
63
- let step = 0;
64
-
65
- // Clear any existing transition interval
66
- if (transitionInterval) {
67
- clearInterval(transitionInterval);
68
- }
69
- transitionInterval = setInterval(() => {
70
- step++;
71
- currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
72
- currentSize = currentSize - (currentSize - targetSize) / steps;
73
- setBrightness(currentBrightness);
74
- setObjectSize(currentSize);
75
- if (step === steps) {
76
- if (transitionInterval) {
77
- clearInterval(transitionInterval);
78
- }
79
- }
80
- }, stepDuration);
81
- };
82
- useEffect(() => {
83
- setObjectX(window.innerWidth / 2);
84
- setObjectY(window.innerHeight / 2);
85
- setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
86
- setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
87
- setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
88
- }, []);
89
- useEffect(() => {
90
- const handleEndEvent = () => {
91
- handleEnd();
92
- };
93
- const handleStartEvent = () => {
94
- handleStart();
95
- };
96
- const handleMoveEvent = e => {
97
- const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
98
- const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
99
- handleMove(x, y);
100
- };
101
- window.addEventListener("touchend", handleEndEvent);
102
- window.addEventListener("mouseup", handleEndEvent);
103
- window.addEventListener("touchstart", handleStartEvent);
104
- window.addEventListener("mousedown", handleStartEvent);
105
- window.addEventListener("touchmove", handleMoveEvent);
106
- window.addEventListener("mousemove", handleMoveEvent);
107
- return () => {
108
- window.removeEventListener("touchend", handleEndEvent);
109
- window.removeEventListener("mouseup", handleEndEvent);
110
- window.removeEventListener("touchstart", handleStartEvent);
111
- window.removeEventListener("mousedown", handleStartEvent);
112
- window.removeEventListener("touchmove", handleMoveEvent);
113
- window.removeEventListener("mousemove", handleMoveEvent);
114
- };
115
- }, [minSize, maxSize]);
116
- return /*#__PURE__*/React__default.createElement("div", {
117
- style: {
118
- position: "fixed",
119
- top: 0,
120
- left: 0,
121
- width: "100vw",
122
- height: "100vh",
123
- zIndex: -1,
124
- pointerEvents: "none",
125
- isolation: "isolate"
126
- }
127
- }, /*#__PURE__*/React__default.createElement("div", {
128
- id: "background",
129
- style: {
130
- position: "absolute",
131
- top: 0,
132
- left: 0,
133
- display: "Block",
134
- width: "100%",
135
- height: "100%",
136
- background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
137
- zIndex: -1
138
- }
139
- }), /*#__PURE__*/React__default.createElement("svg", {
140
- id: "object",
141
- width: "".concat(ObjectSize, "px"),
142
- height: "".concat(ObjectSize, "px"),
143
- style: {
144
- position: "absolute",
145
- top: "".concat(objectY, "px"),
146
- left: "".concat(objectX, "px"),
147
- transform: "translate(-50%, -50%)"
148
- }
149
- }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
150
- id: "radial-gradient-mask"
151
- }, /*#__PURE__*/React__default.createElement("radialGradient", {
152
- id: "gradient",
153
- cx: "50%",
154
- cy: "50%",
155
- r: "50%",
156
- fx: "50%",
157
- fy: "50%"
158
- }, /*#__PURE__*/React__default.createElement("stop", {
159
- offset: "0%",
160
- stopColor: "white"
161
- }), /*#__PURE__*/React__default.createElement("stop", {
162
- offset: "100%",
163
- stopColor: "black"
164
- })), /*#__PURE__*/React__default.createElement("rect", {
165
- width: "100%",
166
- height: "100%",
167
- fill: "url(#gradient)"
168
- }))), /*#__PURE__*/React__default.createElement("rect", {
169
- width: "100%",
170
- height: "100%",
171
- fill: theme.palette.primary.main,
172
- mask: "url(#radial-gradient-mask)",
173
- style: {
174
- filter: "brightness(".concat(brightness, ")")
175
- }
176
- })), /*#__PURE__*/React__default.createElement("svg", {
177
- id: "foreground",
178
- style: {
179
- position: "absolute"
180
- },
181
- preserveAspectRatio: "xMidYMid slice",
182
- width: "100%",
183
- height: "100%",
184
- viewBox: "0 0 7680 4320 "
185
- }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
186
- id: "mask"
187
- }, /*#__PURE__*/React__default.createElement("rect", {
188
- width: "100%",
189
- height: "100%",
190
- fill: "white"
191
- }), /*#__PURE__*/React__default.createElement("text", {
192
- transform: "translate(-1000 200) rotate(-15)",
193
- style: {
194
- fill: "#000",
195
- fontFamily: "Merriweather-Bold, Merriweather",
196
- fontSize: "360px",
197
- fontWeight: 700,
198
- letterSpacing: ".055em"
199
- }
200
- }, /*#__PURE__*/React__default.createElement("tspan", {
201
- x: "0",
202
- y: "0"
203
- }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
204
- x: "0",
205
- y: "432"
206
- }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React__default.createElement("tspan", {
207
- x: "0",
208
- y: "864"
209
- }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React__default.createElement("tspan", {
210
- x: "0",
211
- y: "1296"
212
- }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React__default.createElement("tspan", {
213
- x: "0",
214
- y: "1728"
215
- }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
216
- x: "0",
217
- y: "2160"
218
- }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React__default.createElement("tspan", {
219
- x: "0",
220
- y: "2592"
221
- }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
222
- x: "0",
223
- y: "3024"
224
- }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React__default.createElement("tspan", {
225
- x: "0",
226
- y: "3456"
227
- }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React__default.createElement("tspan", {
228
- x: "0",
229
- y: "3888"
230
- }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
231
- x: "0",
232
- y: "4320"
233
- }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React__default.createElement("tspan", {
234
- x: "0",
235
- y: "4752"
236
- }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React__default.createElement("tspan", {
237
- x: "0",
238
- y: "5184"
239
- }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React__default.createElement("tspan", {
240
- x: "0",
241
- y: "5616"
242
- }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React__default.createElement("tspan", {
243
- x: "0",
244
- y: "6048"
245
- }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
246
- width: "100%",
247
- height: "100%",
248
- fill: theme.palette.mode === "dark" ? "#222" : "#fff",
249
- mask: "url(#mask)"
250
- })));
251
- }
252
-
253
- export { FluidBackground as default };
package/dist/esm/components/Footer.js DELETED
@@ -1,241 +0,0 @@
1
- "use client";
2
- /*
3
- * UMWD-Components
4
- * @copyright Jelle Paulus
5
- * @license MIT
6
- */
7
-
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';
10
- import Link from 'next/link';
11
- import Image from 'next/image';
12
- import getIcon from '../lib/getIcon.js';
13
- import PropTypes from 'prop-types';
14
- import { MuiLink } from './MuiLink.js';
15
-
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
- };
44
- function Footer(_ref) {
45
- let {
46
- site_title,
47
- logo,
48
- company_name,
49
- parent_company_name,
50
- company_address,
51
- CoC_number,
52
- VAT_number,
53
- company_socials,
54
- disclaimer_link,
55
- privacypolicy_link,
56
- maxWidth = "lg",
57
- referal
58
- } = _ref;
59
- const theme = useTheme();
60
- const APIcon = getIcon("APIcon");
61
- return /*#__PURE__*/React__default.createElement(AppBar, {
62
- position: "relative",
63
- sx: {
64
- backgroundColor: theme.palette.mode === "light" ? theme.palette.primary.light : theme.palette.primary.dark
65
- }
66
- }, /*#__PURE__*/React__default.createElement(Container, {
67
- maxWidth: maxWidth
68
- }, /*#__PURE__*/React__default.createElement(Toolbar, {
69
- disableGutters: true
70
- }, /*#__PURE__*/React__default.createElement(Grid, {
71
- container: true,
72
- sx: {
73
- p: 2
74
- },
75
- spacing: 2
76
- }, /*#__PURE__*/React__default.createElement(Grid, {
77
- item: true,
78
- xs: 12,
79
- sm: 12,
80
- md: 4,
81
- align: "center"
82
- }, /*#__PURE__*/React__default.createElement(Box, {
83
- sx: {
84
- display: {
85
- xs: "none",
86
- md: "flex"
87
- },
88
- cursor: "pointer",
89
- flexDirection: "column",
90
- alignItems: "center",
91
- justifyContent: "flex-start",
92
- height: "100%",
93
- textDecoration: "none"
94
- }
95
- }, /*#__PURE__*/React__default.createElement(Typography, {
96
- variant: "h6",
97
- color: "#ffffff",
98
- sx: {
99
- mb: 2
100
- }
101
- }, site_title), logo && /*#__PURE__*/React__default.createElement(Link, {
102
- href: "#home"
103
- }, /*#__PURE__*/React__default.createElement(Box, {
104
- sx: {
105
- display: "flex",
106
- alignItems: "center",
107
- justifyContent: "center",
108
- height: "100%",
109
- p: 1
110
- }
111
- }, /*#__PURE__*/React__default.createElement(Image, {
112
- src: logo.url,
113
- width: logo.width || 100,
114
- height: logo.height || 100,
115
- alt: logo.alternativeText || "site logo"
116
- }))))), /*#__PURE__*/React__default.createElement(Grid, {
117
- item: true,
118
- xs: 12,
119
- sm: 6,
120
- md: 4,
121
- align: "center"
122
- }, /*#__PURE__*/React__default.createElement(Typography, {
123
- variant: "h6",
124
- sx: {
125
- mb: 2
126
- }
127
- }, "Contact Information"), /*#__PURE__*/React__default.createElement(Typography, {
128
- variant: "h6"
129
- }, company_name), parent_company_name && /*#__PURE__*/React__default.createElement(Typography, {
130
- variant: "h6"
131
- }, "By ", parent_company_name), company_address && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
132
- variant: "body1"
133
- }, company_address.street, " ", company_address.street_number, " ", company_address.street_number_addition && company_address.street_number_addition), /*#__PURE__*/React__default.createElement(Typography, {
134
- variant: "body1"
135
- }, company_address.postal_code, " ", company_address.city), /*#__PURE__*/React__default.createElement(Typography, {
136
- variant: "body1"
137
- }, company_address.country)), /*#__PURE__*/React__default.createElement(Typography, {
138
- variant: "body1"
139
- }, "CoC: ", CoC_number), /*#__PURE__*/React__default.createElement(Typography, {
140
- variant: "body1"
141
- }, "VAT: ", VAT_number), /*#__PURE__*/React__default.createElement(Typography, {
142
- variant: "body1"
143
- }), /*#__PURE__*/React__default.createElement(Typography, {
144
- variant: "body1"
145
- })), /*#__PURE__*/React__default.createElement(Grid, {
146
- item: true,
147
- xs: 12,
148
- sm: 6,
149
- md: 4,
150
- align: "center"
151
- }, company_socials && company_socials.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
152
- variant: "h6",
153
- sx: {
154
- mb: 2
155
- }
156
- }, "Socials"), /*#__PURE__*/React__default.createElement(Stack, {
157
- spacing: 2,
158
- sx: {
159
- width: "min-content",
160
- color: "primary.contrastText",
161
- alignContent: "space-between"
162
- }
163
- }, company_socials.map((company_social, index) => {
164
- const Icon = getIcon(company_social.icon);
165
- return /*#__PURE__*/React__default.createElement(MuiLink, {
166
- href: company_social.url,
167
- target: "_blank"
168
- }, /*#__PURE__*/React__default.createElement(IconButton, {
169
- key: index,
170
- color: "inherit",
171
- size: "large"
172
- }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, null)));
173
- })))), /*#__PURE__*/React__default.createElement(Grid, {
174
- item: true,
175
- xs: 12
176
- }, /*#__PURE__*/React__default.createElement(Divider, null)), /*#__PURE__*/React__default.createElement(Grid, {
177
- item: true,
178
- xs: 12
179
- }, /*#__PURE__*/React__default.createElement(Stack, {
180
- direction: {
181
- xs: "column",
182
- sm: "row"
183
- },
184
- alignItems: "center",
185
- gap: 2,
186
- justifyContent: "space-around"
187
- }, disclaimer_link && /*#__PURE__*/React__default.createElement(Link, {
188
- href: disclaimer_link,
189
- passHref: true,
190
- legacyBehavior: true
191
- }, /*#__PURE__*/React__default.createElement(Link$1, {
192
- target: "_blank"
193
- }, /*#__PURE__*/React__default.createElement(Typography, {
194
- variant: "body1",
195
- color: "#ffffff"
196
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React__default.createElement(Link, {
197
- href: privacypolicy_link,
198
- passHref: true,
199
- legacyBehavior: true
200
- }, /*#__PURE__*/React__default.createElement(Link$1, {
201
- target: "_blank"
202
- }, /*#__PURE__*/React__default.createElement(Typography, {
203
- variant: "body1",
204
- color: "#ffffff"
205
- }, "Privacy Policy"))))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React__default.createElement(Grid, {
206
- item: true,
207
- xs: 12
208
- }, /*#__PURE__*/React__default.createElement(Divider, null)), /*#__PURE__*/React__default.createElement(Grid, {
209
- item: true,
210
- xs: 12,
211
- sx: {
212
- display: "flex",
213
- justifyContent: "center",
214
- alignItems: "center",
215
- pb: "50px"
216
- }
217
- }, referal ? referal : /*#__PURE__*/React__default.createElement(MuiLink, {
218
- href: "https://atelierpaulus.nl/",
219
- target: "_blank"
220
- }, /*#__PURE__*/React__default.createElement(Typography, {
221
- color: "secondary.contrastText",
222
- sx: {
223
- textDecoration: "underline",
224
- verticalAlign: "middle",
225
- display: "flex",
226
- alignItems: "center",
227
- justifyContent: "center",
228
- flexDirection: {
229
- xs: "column",
230
- sm: "row"
231
- },
232
- gap: 2
233
- }
234
- }, "Design & Webdevelopment", APIcon !== null && /*#__PURE__*/React__default.createElement(APIcon, {
235
- sx: {
236
- mx: 2
237
- }
238
- }), "Atelier Paulus")))))));
239
- }
240
-
241
- export { Footer as default };