umwd-components 0.1.200 → 0.1.201
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.
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var React = require('react');
|
|
13
|
+
var material = require('@mui/material');
|
|
13
14
|
|
|
14
15
|
function FluidBackground() {
|
|
15
16
|
const [objectX, setObjectX] = React.useState(0);
|
|
@@ -20,30 +21,9 @@ function FluidBackground() {
|
|
|
20
21
|
const [ObjectSize, setObjectSize] = React.useState(300);
|
|
21
22
|
const [minSize, setMinSize] = React.useState(0);
|
|
22
23
|
const [maxSize, setMaxSize] = React.useState(0);
|
|
24
|
+
const theme = material.useTheme();
|
|
25
|
+
const darkMode = Boolean(theme.palette.mode === "dark");
|
|
23
26
|
let transitionInterval = null;
|
|
24
|
-
|
|
25
|
-
// useEffect(() => {
|
|
26
|
-
// setObjectX(window.innerWidth / 2);
|
|
27
|
-
// setObjectY(window.innerHeight / 2);
|
|
28
|
-
// setObjectSize(
|
|
29
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
30
|
-
// );
|
|
31
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
32
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
33
|
-
// }, []);
|
|
34
|
-
|
|
35
|
-
// const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
|
|
36
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
37
|
-
// const [brightness, setBrightness] = useState(1);
|
|
38
|
-
// const maxBrightness = 1.5;
|
|
39
|
-
// const minBrightness = 0.5;
|
|
40
|
-
// const minSize =
|
|
41
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
42
|
-
// const maxSize =
|
|
43
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
44
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
45
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
46
|
-
|
|
47
27
|
const handleMove = (x, y) => {
|
|
48
28
|
setObjectX(x);
|
|
49
29
|
setObjectY(y);
|
|
@@ -104,54 +84,6 @@ function FluidBackground() {
|
|
|
104
84
|
}
|
|
105
85
|
}, stepDuration);
|
|
106
86
|
};
|
|
107
|
-
|
|
108
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
109
|
-
// useEffect(() => {
|
|
110
|
-
// const handleEndEvent = () => {
|
|
111
|
-
// handleEnd();
|
|
112
|
-
// };
|
|
113
|
-
//
|
|
114
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
115
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
116
|
-
//
|
|
117
|
-
// return () => {
|
|
118
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
119
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
120
|
-
// };
|
|
121
|
-
// }, []);
|
|
122
|
-
//
|
|
123
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
124
|
-
// useEffect(() => {
|
|
125
|
-
// const handleStartEvent = () => {
|
|
126
|
-
// handleStart();
|
|
127
|
-
// };
|
|
128
|
-
//
|
|
129
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
130
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
131
|
-
//
|
|
132
|
-
// return () => {
|
|
133
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
134
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
135
|
-
// };
|
|
136
|
-
// }, []);
|
|
137
|
-
//
|
|
138
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
139
|
-
// useEffect(() => {
|
|
140
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
141
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
142
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
143
|
-
// handleMove(x, y);
|
|
144
|
-
// };
|
|
145
|
-
//
|
|
146
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
147
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
148
|
-
//
|
|
149
|
-
// return () => {
|
|
150
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
151
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
152
|
-
// };
|
|
153
|
-
// }, []);
|
|
154
|
-
//
|
|
155
87
|
React.useEffect(() => {
|
|
156
88
|
setObjectX(window.innerWidth / 2);
|
|
157
89
|
setObjectY(window.innerHeight / 2);
|
|
@@ -206,7 +138,7 @@ function FluidBackground() {
|
|
|
206
138
|
display: "Block",
|
|
207
139
|
width: "100%",
|
|
208
140
|
height: "100%",
|
|
209
|
-
background: "#2d2d2d",
|
|
141
|
+
background: darkMode ? "#2d2d2d" : "#fafafa",
|
|
210
142
|
zIndex: -1
|
|
211
143
|
}
|
|
212
144
|
}), /*#__PURE__*/React.createElement("svg", {
|
|
@@ -241,7 +173,7 @@ function FluidBackground() {
|
|
|
241
173
|
}))), /*#__PURE__*/React.createElement("rect", {
|
|
242
174
|
width: "100%",
|
|
243
175
|
height: "100%",
|
|
244
|
-
fill:
|
|
176
|
+
fill: theme.palette.primary.main,
|
|
245
177
|
mask: "url(#radial-gradient-mask)",
|
|
246
178
|
style: {
|
|
247
179
|
filter: "brightness(".concat(brightness, ")")
|
|
@@ -318,7 +250,7 @@ function FluidBackground() {
|
|
|
318
250
|
}, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
|
|
319
251
|
width: "100%",
|
|
320
252
|
height: "100%",
|
|
321
|
-
fill: "#222",
|
|
253
|
+
fill: darkMode ? "#222" : "#fff",
|
|
322
254
|
mask: "url(#mask)"
|
|
323
255
|
})));
|
|
324
256
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React__default, { useState, useEffect } from 'react';
|
|
9
|
+
import { useTheme } from '@mui/material';
|
|
9
10
|
|
|
10
11
|
function FluidBackground() {
|
|
11
12
|
const [objectX, setObjectX] = useState(0);
|
|
@@ -16,30 +17,9 @@ function FluidBackground() {
|
|
|
16
17
|
const [ObjectSize, setObjectSize] = useState(300);
|
|
17
18
|
const [minSize, setMinSize] = useState(0);
|
|
18
19
|
const [maxSize, setMaxSize] = useState(0);
|
|
20
|
+
const theme = useTheme();
|
|
21
|
+
const darkMode = Boolean(theme.palette.mode === "dark");
|
|
19
22
|
let transitionInterval = null;
|
|
20
|
-
|
|
21
|
-
// useEffect(() => {
|
|
22
|
-
// setObjectX(window.innerWidth / 2);
|
|
23
|
-
// setObjectY(window.innerHeight / 2);
|
|
24
|
-
// setObjectSize(
|
|
25
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
26
|
-
// );
|
|
27
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
28
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
29
|
-
// }, []);
|
|
30
|
-
|
|
31
|
-
// const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
|
|
32
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
33
|
-
// const [brightness, setBrightness] = useState(1);
|
|
34
|
-
// const maxBrightness = 1.5;
|
|
35
|
-
// const minBrightness = 0.5;
|
|
36
|
-
// const minSize =
|
|
37
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
38
|
-
// const maxSize =
|
|
39
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
40
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
41
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
42
|
-
|
|
43
23
|
const handleMove = (x, y) => {
|
|
44
24
|
setObjectX(x);
|
|
45
25
|
setObjectY(y);
|
|
@@ -100,54 +80,6 @@ function FluidBackground() {
|
|
|
100
80
|
}
|
|
101
81
|
}, stepDuration);
|
|
102
82
|
};
|
|
103
|
-
|
|
104
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
105
|
-
// useEffect(() => {
|
|
106
|
-
// const handleEndEvent = () => {
|
|
107
|
-
// handleEnd();
|
|
108
|
-
// };
|
|
109
|
-
//
|
|
110
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
111
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
112
|
-
//
|
|
113
|
-
// return () => {
|
|
114
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
115
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
116
|
-
// };
|
|
117
|
-
// }, []);
|
|
118
|
-
//
|
|
119
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
120
|
-
// useEffect(() => {
|
|
121
|
-
// const handleStartEvent = () => {
|
|
122
|
-
// handleStart();
|
|
123
|
-
// };
|
|
124
|
-
//
|
|
125
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
126
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
127
|
-
//
|
|
128
|
-
// return () => {
|
|
129
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
130
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
131
|
-
// };
|
|
132
|
-
// }, []);
|
|
133
|
-
//
|
|
134
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
135
|
-
// useEffect(() => {
|
|
136
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
137
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
138
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
139
|
-
// handleMove(x, y);
|
|
140
|
-
// };
|
|
141
|
-
//
|
|
142
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
143
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
144
|
-
//
|
|
145
|
-
// return () => {
|
|
146
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
147
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
148
|
-
// };
|
|
149
|
-
// }, []);
|
|
150
|
-
//
|
|
151
83
|
useEffect(() => {
|
|
152
84
|
setObjectX(window.innerWidth / 2);
|
|
153
85
|
setObjectY(window.innerHeight / 2);
|
|
@@ -202,7 +134,7 @@ function FluidBackground() {
|
|
|
202
134
|
display: "Block",
|
|
203
135
|
width: "100%",
|
|
204
136
|
height: "100%",
|
|
205
|
-
background: "#2d2d2d",
|
|
137
|
+
background: darkMode ? "#2d2d2d" : "#fafafa",
|
|
206
138
|
zIndex: -1
|
|
207
139
|
}
|
|
208
140
|
}), /*#__PURE__*/React__default.createElement("svg", {
|
|
@@ -237,7 +169,7 @@ function FluidBackground() {
|
|
|
237
169
|
}))), /*#__PURE__*/React__default.createElement("rect", {
|
|
238
170
|
width: "100%",
|
|
239
171
|
height: "100%",
|
|
240
|
-
fill:
|
|
172
|
+
fill: theme.palette.primary.main,
|
|
241
173
|
mask: "url(#radial-gradient-mask)",
|
|
242
174
|
style: {
|
|
243
175
|
filter: "brightness(".concat(brightness, ")")
|
|
@@ -314,7 +246,7 @@ function FluidBackground() {
|
|
|
314
246
|
}, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
|
|
315
247
|
width: "100%",
|
|
316
248
|
height: "100%",
|
|
317
|
-
fill: "#222",
|
|
249
|
+
fill: darkMode ? "#222" : "#fff",
|
|
318
250
|
mask: "url(#mask)"
|
|
319
251
|
})));
|
|
320
252
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React, { useState, useEffect } from "react";
|
|
4
|
+
import { useTheme } from "@mui/material";
|
|
4
5
|
|
|
5
6
|
function FluidBackground() {
|
|
6
7
|
const [objectX, setObjectX] = useState(0);
|
|
@@ -11,30 +12,10 @@ function FluidBackground() {
|
|
|
11
12
|
const [ObjectSize, setObjectSize] = useState(300);
|
|
12
13
|
const [minSize, setMinSize] = useState(0);
|
|
13
14
|
const [maxSize, setMaxSize] = useState(0);
|
|
15
|
+
const theme = useTheme();
|
|
16
|
+
const darkMode = Boolean(theme.palette.mode === "dark");
|
|
14
17
|
let transitionInterval: NodeJS.Timeout | null = null;
|
|
15
18
|
|
|
16
|
-
// useEffect(() => {
|
|
17
|
-
// setObjectX(window.innerWidth / 2);
|
|
18
|
-
// setObjectY(window.innerHeight / 2);
|
|
19
|
-
// setObjectSize(
|
|
20
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
21
|
-
// );
|
|
22
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
23
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
24
|
-
// }, []);
|
|
25
|
-
|
|
26
|
-
// const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
|
|
27
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
28
|
-
// const [brightness, setBrightness] = useState(1);
|
|
29
|
-
// const maxBrightness = 1.5;
|
|
30
|
-
// const minBrightness = 0.5;
|
|
31
|
-
// const minSize =
|
|
32
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
33
|
-
// const maxSize =
|
|
34
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
35
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
36
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
37
|
-
|
|
38
19
|
const handleMove = (x: number, y: number) => {
|
|
39
20
|
setObjectX(x);
|
|
40
21
|
setObjectY(y);
|
|
@@ -104,53 +85,6 @@ function FluidBackground() {
|
|
|
104
85
|
}, stepDuration);
|
|
105
86
|
};
|
|
106
87
|
|
|
107
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
108
|
-
// useEffect(() => {
|
|
109
|
-
// const handleEndEvent = () => {
|
|
110
|
-
// handleEnd();
|
|
111
|
-
// };
|
|
112
|
-
//
|
|
113
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
114
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
115
|
-
//
|
|
116
|
-
// return () => {
|
|
117
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
118
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
119
|
-
// };
|
|
120
|
-
// }, []);
|
|
121
|
-
//
|
|
122
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
123
|
-
// useEffect(() => {
|
|
124
|
-
// const handleStartEvent = () => {
|
|
125
|
-
// handleStart();
|
|
126
|
-
// };
|
|
127
|
-
//
|
|
128
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
129
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
130
|
-
//
|
|
131
|
-
// return () => {
|
|
132
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
133
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
134
|
-
// };
|
|
135
|
-
// }, []);
|
|
136
|
-
//
|
|
137
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
138
|
-
// useEffect(() => {
|
|
139
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
140
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
141
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
142
|
-
// handleMove(x, y);
|
|
143
|
-
// };
|
|
144
|
-
//
|
|
145
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
146
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
147
|
-
//
|
|
148
|
-
// return () => {
|
|
149
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
150
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
151
|
-
// };
|
|
152
|
-
// }, []);
|
|
153
|
-
//
|
|
154
88
|
useEffect(() => {
|
|
155
89
|
setObjectX(window.innerWidth / 2);
|
|
156
90
|
setObjectY(window.innerHeight / 2);
|
|
@@ -215,7 +149,7 @@ function FluidBackground() {
|
|
|
215
149
|
display: "Block",
|
|
216
150
|
width: "100%",
|
|
217
151
|
height: "100%",
|
|
218
|
-
background: "#2d2d2d",
|
|
152
|
+
background: darkMode ? "#2d2d2d" : "#fafafa",
|
|
219
153
|
zIndex: -1,
|
|
220
154
|
}}
|
|
221
155
|
/>
|
|
@@ -249,7 +183,7 @@ function FluidBackground() {
|
|
|
249
183
|
<rect
|
|
250
184
|
width="100%"
|
|
251
185
|
height="100%"
|
|
252
|
-
fill=
|
|
186
|
+
fill={theme.palette.primary.main}
|
|
253
187
|
mask="url(#radial-gradient-mask)"
|
|
254
188
|
style={{ filter: `brightness(${brightness})` }}
|
|
255
189
|
/>
|
|
@@ -329,7 +263,7 @@ function FluidBackground() {
|
|
|
329
263
|
<rect
|
|
330
264
|
width={"100%"}
|
|
331
265
|
height={"100%"}
|
|
332
|
-
fill="#222"
|
|
266
|
+
fill={darkMode ? "#222" : "#fff"}
|
|
333
267
|
mask="url(#mask)"
|
|
334
268
|
></rect>
|
|
335
269
|
</svg>
|