fix(rules): reload button style issue

src/components/Button.tsx

@@ -1,19 +1,25 @@
 import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 
-export const Button: ParentComponent<
+interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean
   disabled?: boolean
-    icon?: JSX.Element
 }
+
+interface ButtonWithIconProps extends ButtonBaseProps {
+  icon: JSX.Element
+  children?: JSX.Element
+}
+
+interface ButtonWithoutIconProps extends ButtonBaseProps {
+  icon?: JSX.Element
+  children: JSX.Element
+}
+
+export const Button: ParentComponent<
+  ButtonWithIconProps | ButtonWithoutIconProps
 > = (props) => {
-  const [local, others] = splitProps(props, [
+  const [local, others] = splitProps(props, ['class', 'loading', 'icon'])
-    'class',
-    'loading',
-    'disabled',
-    'icon',
-  ])
 
   return (
     <button
@@ -22,29 +28,12 @@ export const Button: ParentComponent<
         local.loading ? 'btn-disabled' : local.class,
       )}
       {...others}
-      onClick={(e) => {
-        if (props.disabled) {
-          e.preventDefault()
-          e.stopPropagation()
-
-          return
-        }
-
-        if (typeof props.onClick === 'function') {
-          props.onClick(e)
-        }
-      }}
     >
       <Show when={local.loading}>
         <div class="loading loading-spinner" />
       </Show>
 
-      <span
+      <span class="truncate" classList={{ 'flex-1': !local.icon }}>
-        class="truncate"
-        classList={{
-          'flex-1': !local.icon,
-        }}
-      >
         {props.icon || props.children}
       </span>
     </button>

src/pages/Rules.tsx

@@ -59,7 +59,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs tabs-boxed gap-2">
+        <div class="tabs-boxed tabs gap-2">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -81,13 +81,14 @@ export default () => {
             class="btn btn-circle btn-sm"
             disabled={allProviderIsUpdating()}
             onClick={(e) => onUpdateAllProviderClick(e)}
-          >
+            icon={
               <IconReload
                 class={twMerge(
                   allProviderIsUpdating() && 'animate-spin text-success',
                 )}
               />
-          </Button>
+            }
+          />
         </Show>
       </div>
 
@@ -133,14 +134,15 @@ export default () => {
                     class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
                     disabled={updatingMap()[ruleProvider.name]}
                     onClick={(e) => onUpdateProviderClick(e, ruleProvider.name)}
-                  >
+                    icon={
                       <IconReload
                         class={twMerge(
                           updatingMap()[ruleProvider.name] &&
                             'animate-spin text-success',
                         )}
                       />
-                  </Button>
+                    }
+                  />
                 </div>
               )}
             </For>