feat: add SiderSwitch component (#1)

.gitignore

@@ -5,3 +5,4 @@ dist
 out
 .DS_Store
 *.log*
+.idea

src/renderer/src/components/sider/index.ts

@@ -0,0 +1 @@
+export { default as SiderSwitch } from './sider-swtich'

src/renderer/src/components/sider/override-card.tsx

@@ -1,7 +1,8 @@
-import { Button, Card, CardBody, CardFooter, Switch } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, cn } from '@nextui-org/react'
 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()
@@ -25,11 +26,8 @@ const OverrideCard: React.FC = () => {
           >
             <MdFormatOverline color="default" className="text-[24px]" />
           </Button>
-          <Switch
+          <SiderSwitch
-            classNames={{
+            isShowBorder={match && enable}
-              wrapper: `${match && enable ? 'border-2' : ''}`
-            }}
-            size="sm"
             isSelected={enable}
             onValueChange={setEnable}
           />

src/renderer/src/components/sider/sider-swtich.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { cn, Switch, SwitchProps } from '@nextui-org/react'
+
+interface SiderSwitchProps extends SwitchProps {
+  isShowBorder?: boolean
+}
+
+const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
+  const { isShowBorder = false, isSelected, classNames, ...switchProps } = props
+
+  return (
+    <Switch
+      classNames={{
+        wrapper: cn('border-2', {
+          'border-transparent': !isShowBorder
+        }),
+        thumb: cn('absolute z-4', { 'transform -translate-x-[2px]': isSelected }),
+        ...classNames
+      }}
+      size="sm"
+      {...switchProps}
+    />
+  )
+}
+
+export default SiderSwitch

src/renderer/src/components/sider/sysproxy-switcher.tsx

@@ -1,9 +1,10 @@
-import { Button, Card, CardBody, CardFooter, Switch } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useAppConfig } from '@renderer/hooks/use-config'
 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()
@@ -34,11 +35,8 @@ const SysproxySwitcher: React.FC = () => {
           >
             <AiOutlineGlobal color="default" className="text-[24px]" />
           </Button>
-          <Switch
+          <SiderSwitch
-            classNames={{
+            isShowBorder={match && enable}
-              wrapper: `${match && enable ? 'border-2' : ''}`
-            }}
-            size="sm"
             isSelected={enable}
             onValueChange={onChange}
           />

src/renderer/src/components/sider/tun-switcher.tsx

@@ -1,9 +1,10 @@
-import { Button, Card, CardBody, CardFooter, Switch } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
 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()
@@ -35,11 +36,8 @@ const TunSwitcher: React.FC = () => {
           >
             <TbDeviceIpadHorizontalBolt color="default" className="text-[24px] font-bold" />
           </Button>
-          <Switch
+          <SiderSwitch
-            classNames={{
+            isShowBorder={match && enable}
-              wrapper: `${match && enable ? 'border-2' : ''}`
-            }}
-            size="sm"
             isSelected={enable}
             onValueChange={onChange}
           />