From 9cc99ebb8e380f9b5e855b6d3250dfe96e237134 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Fri, 22 Sep 2023 15:07:13 +0800
Subject: [PATCH] feat(config): move switch language button into header

---
 src/components/Collapse.tsx |  2 +-
 src/components/Header.tsx   | 18 +++++++++++++++---
 src/pages/Config.tsx        | 16 ++--------------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 87e46fc..f9cc798 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -28,7 +28,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow select-none overflow-visible border-secondary bg-base-200',
+        'collapse collapse-arrow select-none overflow-visible border-secondary bg-base-200 drop-shadow-md',
       )}
     >
       <div
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 54203c7..1aacd5f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,6 +4,7 @@ import {
   IconFileStack,
   IconGlobe,
   IconHome,
+  IconLanguage,
   IconMenu,
   IconNetwork,
   IconPalette,
@@ -11,8 +12,8 @@ import {
   IconSettings,
 } from '@tabler/icons-solidjs'
 import { For, ParentComponent, Show, createSignal } from 'solid-js'
-import { LogoText } from '~/components'
-import { ROUTES, themes } from '~/constants'
+import { Button, LogoText } from '~/components'
+import { LANG, ROUTES, themes } from '~/constants'
 import { setCurTheme } from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@@ -61,7 +62,7 @@ const ThemeSwitcher = () => (
 )
 
 export const Header = () => {
-  const [t] = useI18n()
+  const [t, { locale }] = useI18n()
   const navs = () => [
     {
       href: ROUTES.Overview,
@@ -151,6 +152,17 @@ export const Header = () => {
 
       <div class="navbar-end">
         <div class="flex items-center gap-2">
+          <Button
+            class="btn-circle btn-secondary btn-sm"
+            onClick={() => {
+              const curLocale = locale()
+
+              locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
+            }}
+          >
+            <IconLanguage />
+          </Button>
+
           <ThemeSwitcher />
         </div>
       </div>
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 0948b3b..d800940 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -27,7 +27,7 @@ import {
   upgradingBackend,
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
-import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { MODE_OPTIONS, ROUTES, themes } from '~/constants'
 import {
   autoSwitchTheme,
   favDayTheme,
@@ -269,22 +269,10 @@ const ConfigForm = () => {
 }
 
 const ConfigForXd = () => {
-  const [t, { locale }] = useI18n()
+  const [t] = useI18n()
 
   return (
     <div class="grid grid-cols-2 place-items-center gap-4">
-      <div class="col-span-2">
-        <Button
-          onClick={() => {
-            const curLocale = locale()
-
-            locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
-          }}
-        >
-          {t('switchLanguage')}
-        </Button>
-      </div>
-
       <div class="flex flex-col gap-4">
         <div>
           <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>