summaryrefslogtreecommitdiff
path: root/src/components/shared
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/shared')
-rw-r--r--src/components/shared/BaseModal.tsx11
-rw-r--r--src/components/shared/Basic.module.scss2
-rw-r--r--src/components/shared/Fab.tsx13
-rw-r--r--src/components/shared/FeatherIcons.ts38
-rw-r--r--src/components/shared/RotateIcon.tsx2
-rw-r--r--src/components/shared/ThemeSwitcher.tsx150
6 files changed, 131 insertions, 85 deletions
diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index 72dcba4..f7841f8 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -1,6 +1,7 @@
import cx from 'clsx';
import * as React from 'react';
-import Modal from 'react-modal';
+
+import Modal from '../Modal';
import modalStyle from '../Modal.module.scss';
@@ -8,7 +9,13 @@ import s from './BaseModal.module.scss';
const { useMemo } = React;
-export default function BaseModal({ isOpen, onRequestClose, children }) {
+type BaseModalProps = {
+ isOpen: boolean;
+ onRequestClose: (...args: any[]) => unknown;
+ children: React.ReactNode;
+};
+
+export default function BaseModal({ isOpen, onRequestClose, children }: BaseModalProps) {
const className = useMemo(
() => ({
base: cx(modalStyle.content, s.cnt),
diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss
index 79b8a16..df412e5 100644
--- a/src/components/shared/Basic.module.scss
+++ b/src/components/shared/Basic.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
h2.sectionNameType {
margin: 0;
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
index 8e72432..49c9a89 100644
--- a/src/components/shared/Fab.tsx
+++ b/src/components/shared/Fab.tsx
@@ -18,7 +18,7 @@ export const position = {
interface ABProps extends React.HTMLAttributes<HTMLButtonElement> {
text?: string;
- onClick?: (e: React.FormEvent) => void;
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
'data-testid'?: string;
}
@@ -46,7 +46,7 @@ interface FabProps {
alwaysShowTitle?: boolean;
icon?: React.ReactNode;
mainButtonStyles?: React.CSSProperties;
- onClick?: (e: React.FormEvent) => void;
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
text?: string;
children?: React.ReactNode;
}
@@ -68,7 +68,7 @@ const Fab: React.FC<FabProps> = ({
const close = () => setIsOpen(false);
const enter = () => event === 'hover' && open();
const leave = () => event === 'hover' && close();
- const toggle = (e: React.FormEvent) => {
+ const toggle = (e: React.MouseEvent<HTMLButtonElement>) => {
if (onClick) {
return onClick(e);
}
@@ -76,7 +76,10 @@ const Fab: React.FC<FabProps> = ({
return event === 'click' ? (isOpen ? close() : open()) : null;
};
- const actionOnClick = (e: React.FormEvent, userFunc: (e: React.FormEvent) => void) => {
+ const actionOnClick = (
+ e: React.MouseEvent<HTMLButtonElement>,
+ userFunc: (e: React.MouseEvent<HTMLButtonElement>) => unknown
+ ) => {
e.persist();
setIsOpen(false);
setTimeout(() => {
@@ -95,7 +98,7 @@ const Fab: React.FC<FabProps> = ({
'aria-hidden': ariaHidden,
tabIndex: isOpen ? 0 : -1,
...ch.props,
- onClick: (e: React.FormEvent) => {
+ onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
if (ch.props.onClick) actionOnClick(e, ch.props.onClick);
},
})}
diff --git a/src/components/shared/FeatherIcons.ts b/src/components/shared/FeatherIcons.ts
new file mode 100644
index 0000000..ee1f410
--- /dev/null
+++ b/src/components/shared/FeatherIcons.ts
@@ -0,0 +1,38 @@
+export {
+ Activity,
+ ArrowDown,
+ ArrowDownCircle,
+ ArrowUp,
+ ChevronDown,
+ ChevronUp,
+ Cpu,
+ Database,
+ Download,
+ DownloadCloud,
+ Eye,
+ EyeOff,
+ FileText,
+ GitHub,
+ Globe,
+ Hash,
+ Info,
+ Link,
+ LogOut,
+ Menu,
+ Monitor,
+ Pause,
+ Play,
+ RefreshCcw,
+ RefreshCw,
+ RotateCw,
+ Settings,
+ Shield,
+ Sliders,
+ Tag,
+ Tool,
+ Trash2,
+ Upload,
+ X,
+ XCircle,
+ Zap,
+} from 'react-feather';
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index 7e3ceae..0a5a018 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -1,6 +1,6 @@
import cx from 'clsx';
import * as React from 'react';
-import { RotateCw } from 'react-feather';
+import { RotateCw } from '~/components/shared/FeatherIcons';
import s from './RotateIcon.module.scss';
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
index 363d422..dfe248d 100644
--- a/src/components/shared/ThemeSwitcher.tsx
+++ b/src/components/shared/ThemeSwitcher.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { connect } from '~/components/StateProvider';
-import { framerMotionResouce } from '~/misc/motion';
+import { LazyMotion, domAnimation, m } from 'framer-motion';
import { getTheme, switchTheme } from '~/store/app';
import { State } from '~/store/types';
@@ -28,7 +28,7 @@ export function ThemeSwitcherImpl({ theme, dispatch }) {
const onChange = React.useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => dispatch(switchTheme(e.target.value)),
- [dispatch]
+ [dispatch],
);
return (
@@ -46,91 +46,89 @@ export function ThemeSwitcherImpl({ theme, dispatch }) {
}
function MoonA() {
- const module = framerMotionResouce.read();
- const motion = module.motion;
return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <motion.path
- d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
- initial={{ rotate: -30 }}
- animate={{ rotate: 0 }}
- transition={{ duration: 0.7 }}
- />
- </svg>
+ <LazyMotion features={domAnimation}>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <m.path
+ d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+ initial={{ rotate: -30 }}
+ animate={{ rotate: 0 }}
+ transition={{ duration: 0.7 }}
+ />
+ </svg>
+ </LazyMotion>
);
}
function Sun() {
- const module = framerMotionResouce.read();
- const motion = module.motion;
-
return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <circle cx="12" cy="12" r="5"></circle>
- <motion.g initial={{ scale: 0.7 }} animate={{ scale: 1 }} transition={{ duration: 0.5 }}>
- <line x1="12" y1="1" x2="12" y2="3"></line>
- <line x1="12" y1="21" x2="12" y2="23"></line>
- <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
- <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
- <line x1="1" y1="12" x2="3" y2="12"></line>
- <line x1="21" y1="12" x2="23" y2="12"></line>
- <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
- <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
- </motion.g>
- </svg>
+ <LazyMotion features={domAnimation}>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <circle cx="12" cy="12" r="5"></circle>
+ <m.g initial={{ scale: 0.7 }} animate={{ scale: 1 }} transition={{ duration: 0.5 }}>
+ <line x1="12" y1="1" x2="12" y2="3"></line>
+ <line x1="12" y1="21" x2="12" y2="23"></line>
+ <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+ <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+ <line x1="1" y1="12" x2="3" y2="12"></line>
+ <line x1="21" y1="12" x2="23" y2="12"></line>
+ <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+ <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+ </m.g>
+ </svg>
+ </LazyMotion>
);
}
function Auto() {
- const module = framerMotionResouce.read();
- const motion = module.motion;
-
return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <circle cx="12" cy="12" r="11" />
- <clipPath id="cut-off-bottom">
- <motion.rect
- x="12"
- y="0"
- width="12"
- height="24"
- initial={{ rotate: -30 }}
- animate={{ rotate: 0 }}
- transition={{ duration: 0.7 }}
- />
- </clipPath>
- <circle cx="12" cy="12" r="6" clipPath="url(#cut-off-bottom)" fill="currentColor" />
- </svg>
+ <LazyMotion features={domAnimation}>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <circle cx="12" cy="12" r="11" />
+ <clipPath id="cut-off-bottom">
+ <m.rect
+ x="12"
+ y="0"
+ width="12"
+ height="24"
+ initial={{ rotate: -30 }}
+ animate={{ rotate: 0 }}
+ transition={{ duration: 0.7 }}
+ />
+ </clipPath>
+ <circle cx="12" cy="12" r="6" clipPath="url(#cut-off-bottom)" fill="currentColor" />
+ </svg>
+ </LazyMotion>
);
}
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-13 23:07:57 +0000