summaryrefslogtreecommitdiff
path: root/src/components/shared
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/shared')
-rw-r--r--src/components/shared/FeatherIcons.ts91
-rw-r--r--src/components/shared/ThemeSwitcher.tsx150
2 files changed, 112 insertions, 129 deletions
diff --git a/src/components/shared/FeatherIcons.ts b/src/components/shared/FeatherIcons.ts
index 745baa1..ee1f410 100644
--- a/src/components/shared/FeatherIcons.ts
+++ b/src/components/shared/FeatherIcons.ts
@@ -1,53 +1,38 @@
-import * as React from 'react';
-import * as Feather from 'react-feather';
-
-type FeatherCompatProps = {
- color?: string;
- size?: string | number;
- className?: string;
- style?: React.CSSProperties;
- [key: string]: unknown;
-};
-
-type IconComponent = React.ComponentType<FeatherCompatProps>;
-
-function asIcon(name: keyof typeof Feather): IconComponent {
- return Feather[name] as unknown as IconComponent;
-}
-
-export const Activity = asIcon('Activity');
-export const ArrowDown = asIcon('ArrowDown');
-export const ArrowDownCircle = asIcon('ArrowDownCircle');
-export const ArrowUp = asIcon('ArrowUp');
-export const ChevronDown = asIcon('ChevronDown');
-export const ChevronUp = asIcon('ChevronUp');
-export const Cpu = asIcon('Cpu');
-export const Database = asIcon('Database');
-export const Download = asIcon('Download');
-export const DownloadCloud = asIcon('DownloadCloud');
-export const Eye = asIcon('Eye');
-export const EyeOff = asIcon('EyeOff');
-export const FileText = asIcon('FileText');
-export const GitHub = asIcon('GitHub');
-export const Globe = asIcon('Globe');
-export const Hash = asIcon('Hash');
-export const Info = asIcon('Info');
-export const Link = asIcon('Link');
-export const LogOut = asIcon('LogOut');
-export const Menu = asIcon('Menu');
-export const Monitor = asIcon('Monitor');
-export const Pause = asIcon('Pause');
-export const Play = asIcon('Play');
-export const RefreshCcw = asIcon('RefreshCcw');
-export const RefreshCw = asIcon('RefreshCw');
-export const RotateCw = asIcon('RotateCw');
-export const Settings = asIcon('Settings');
-export const Shield = asIcon('Shield');
-export const Sliders = asIcon('Sliders');
-export const Tag = asIcon('Tag');
-export const Tool = asIcon('Tool');
-export const Trash2 = asIcon('Trash2');
-export const Upload = asIcon('Upload');
-export const X = asIcon('X');
-export const XCircle = asIcon('XCircle');
-export const Zap = asIcon('Zap');
+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/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-14 05:08:42 +0000