cat

src/components/Button.tsx

@@ -12,27 +12,36 @@ type Props = {
     XOR<{ children: ReactNode }, { label: string }>;
 
 const Button: FC<Props> = memo((props: Props) => {
+    const {
+        className,
+        disabled,
+        isLoading,
+        percentage,
+        label,
+        children,
+        ...buttonProps
+    } = props
 
     const buttonClass = clx(
         'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary w-full',
-        props.disabled && 'cursor-not-allowed opacity-60',
-        props.className
+        disabled && 'cursor-not-allowed opacity-60',
+        className
     );
 
     return (
-        <button {...props} className={`${buttonClass} ${props.className}`} disabled={props.disabled || props.isLoading}>
+        <button {...buttonProps} className={`${buttonClass} ${className}`} disabled={disabled || isLoading}>
             {
-                props.isLoading ?
+                isLoading ?
                     <div className='flex gap-2 items-center'>
                         {
-                            !props.percentage ?
+                            !percentage ?
                                 <MoonLoader size={20} color='#000' />
                                 :
-                                <span>{props.percentage}%</span>
+                                <span>{percentage}%</span>
                         }
                     </div>
                     :
-                    props.label || props.children
+                    label || children
             }
         </button>
     )