refactor border switch

mihomo-party-org · Aug 2, 2024 · b336026 · b336026
1 parent ba72269
commit b336026
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 24 deletions.
diff --git a/...rer/src/components/sider/sider-swtich.tsx → ...rer/src/components/base/border-swtich.tsx b/...rer/src/components/sider/sider-swtich.tsx → ...rer/src/components/base/border-swtich.tsx
@@ -5,16 +5,16 @@ interface SiderSwitchProps extends SwitchProps {
   isShowBorder?: boolean
 }
 
-const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
-  const { isShowBorder = false, isSelected, classNames, ...switchProps } = props
+const BorderSwitch: React.FC<SiderSwitchProps> = (props) => {
+  const { isShowBorder = false, classNames, ...switchProps } = props
 
   return (
     <Switch
       classNames={{
         wrapper: cn('border-2', {
           'border-transparent': !isShowBorder
         }),
-        thumb: cn('absolute z-4', { 'transform -translate-x-[2px]': isSelected }),
+        thumb: cn('absolute z-4', 'transform -translate-x-[2px]'),
         ...classNames
       }}
       size="sm"
@@ -23,4 +23,4 @@ const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
   )
 }
 
-export default SiderSwitch
+export default BorderSwitch
diff --git a/src/renderer/src/components/sider/index.ts b/src/renderer/src/components/sider/index.ts
diff --git a/src/renderer/src/components/sider/override-card.tsx b/src/renderer/src/components/sider/override-card.tsx
@@ -1,8 +1,8 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import React, { useState } from 'react'
 import { MdFormatOverline } from 'react-icons/md'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { SiderSwitch } from './index'
 
 const OverrideCard: React.FC = () => {
   const navigate = useNavigate()
@@ -26,11 +26,7 @@ const OverrideCard: React.FC = () => {
           >
             <MdFormatOverline color="default" className="text-[24px]" />
           </Button>
-          <SiderSwitch
-            isShowBorder={match && enable}
-            isSelected={enable}
-            onValueChange={setEnable}
-          />
+          <BorderSwitch isShowBorder={match && enable} onValueChange={setEnable} />
         </div>
       </CardBody>
       <CardFooter className="pt-1">

diff --git a/src/renderer/src/components/sider/sysproxy-switcher.tsx b/src/renderer/src/components/sider/sysproxy-switcher.tsx
@@ -1,10 +1,10 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useAppConfig } from '@renderer/hooks/use-config'
+import { triggerSysProxy } from '@renderer/utils/ipc'
 import { AiOutlineGlobal } from 'react-icons/ai'
 import React from 'react'
-import { triggerSysProxy } from '@renderer/utils/ipc'
-import { SiderSwitch } from './index'
 
 const SysproxySwitcher: React.FC = () => {
   const navigate = useNavigate()
@@ -35,11 +35,7 @@ const SysproxySwitcher: React.FC = () => {
           >
             <AiOutlineGlobal color="default" className="text-[24px]" />
           </Button>
-          <SiderSwitch
-            isShowBorder={match && enable}
-            isSelected={enable}
-            onValueChange={onChange}
-          />
+          <BorderSwitch isShowBorder={match && enable} onValueChange={onChange} />
         </div>
       </CardBody>
       <CardFooter className="pt-1">

diff --git a/src/renderer/src/components/sider/tun-switcher.tsx b/src/renderer/src/components/sider/tun-switcher.tsx
@@ -1,10 +1,10 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import { TbDeviceIpadHorizontalBolt } from 'react-icons/tb'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { patchMihomoConfig } from '@renderer/utils/ipc'
 import React from 'react'
-import { SiderSwitch } from './index'
 
 const TunSwitcher: React.FC = () => {
   const navigate = useNavigate()
@@ -36,11 +36,7 @@ const TunSwitcher: React.FC = () => {
           >
             <TbDeviceIpadHorizontalBolt color="default" className="text-[24px] font-bold" />
           </Button>
-          <SiderSwitch
-            isShowBorder={match && enable}
-            isSelected={enable}
-            onValueChange={onChange}
-          />
+          <BorderSwitch isShowBorder={match && enable} onValueChange={onChange} />
         </div>
       </CardBody>
       <CardFooter className="pt-1">