feat: support header right slot

2026-07-25 06:18:45 +08:00 · 2022-12-21 15:31:35 +08:00
parent 954298480b
commit a453454250
8 changed files with 196 additions and 163 deletions
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useTheme } from '@/providers/themeProvider';
+import { MoonIcon, SunIcon } from './icons';
+import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
+
+export const ThemeModeSwitch = () => {
+  const { mode, changeMode } = useTheme();
+  const [isHover, setIsHover] = useState(false);
+  const [firstTrigger, setFirstTrigger] = useState(false);
+  return (
+    <StyledThemeModeSwitch
+      data-testid="change-theme-container"
+      onMouseEnter={() => {
+        setIsHover(true);
+        if (!firstTrigger) {
+          setFirstTrigger(true);
+        }
+      }}
+      onMouseLeave={() => {
+        setIsHover(false);
+      }}
+    >
+      <StyledSwitchItem
+        data-testid="change-theme-light"
+        active={mode === 'light'}
+        isHover={isHover}
+        firstTrigger={firstTrigger}
+        onClick={() => {
+          changeMode('light');
+        }}
+      >
+        <SunIcon />
+      </StyledSwitchItem>
+      <StyledSwitchItem
+        data-testid="change-theme-dark"
+        active={mode === 'dark'}
+        isHover={isHover}
+        firstTrigger={firstTrigger}
+        onClick={() => {
+          changeMode('dark');
+        }}
+      >
+        <MoonIcon />
+      </StyledSwitchItem>
+    </StyledThemeModeSwitch>
+  );
+};
+
+export default ThemeModeSwitch;