chore: modify chart

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>
   );
 }