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'
 
+interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean
+  disabled?: boolean
+}
+
+interface ButtonWithIconProps extends ButtonBaseProps {
+  icon: JSX.Element
+  children?: JSX.Element
+}
+
+interface ButtonWithoutIconProps extends ButtonBaseProps {
+  icon?: JSX.Element
+  children: JSX.Element
+}
+
 export const Button: ParentComponent<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+  ButtonWithIconProps | ButtonWithoutIconProps
-    loading?: boolean
-    disabled?: boolean
-    icon?: JSX.Element
-  }
 > = (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
+              <IconReload
-              class={twMerge(
+                class={twMerge(
-                allProviderIsUpdating() && 'animate-spin text-success',
+                  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
+                      <IconReload
-                      class={twMerge(
+                        class={twMerge(
-                        updatingMap()[ruleProvider.name] &&
+                          updatingMap()[ruleProvider.name] &&
-                          'animate-spin text-success',
+                            'animate-spin text-success',
-                      )}
+                        )}
-                    />
+                      />
-                  </Button>
+                    }
+                  />
                 </div>
               )}
             </For>