reponsive and selective actions and row actioin + pagination

src/components/Button.tsx

@@ -1,40 +1,40 @@
-import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
-import MoonLoader from "react-spinners/MoonLoader"
-import { XOR } from '../helpers/types'
+import { FC, ReactNode } from 'react'
 import { clx } from '../helpers/utils'
 
-type Props = {
+interface ButtonProps {
+    label?: string;
+    children?: ReactNode;
     className?: string;
-    isLoading?: boolean,
-    percentage?: number,
-} & ButtonHTMLAttributes<HTMLButtonElement> &
-    XOR<{ children: ReactNode }, { label: string }>;
+    loading?: boolean;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+}
 
-const Button: FC<Props> = memo((props: Props) => {
+const Button: FC<ButtonProps> = (props) => {
 
     const buttonClass = clx(
-        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary text-white w-full',
-        props.disabled && 'cursor-not-allowed opacity-60',
+        'w-full bg-primary text-white rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
         props.className
-    );
+    )
 
     return (
-        <button {...props} className={`${buttonClass} ${props.className}`} >
-            {
-                props.isLoading ?
-                    <div className='flex gap-2 items-center'>
-                        {
-                            !props.percentage ?
-                                <MoonLoader size={20} color='#fff' />
-                                :
-                                <span>{props.percentage}%</span>
-                        }
-                    </div>
-                    :
-                    props.label || props.children
-            }
+        <button
+            onClick={props.onClick}
+            type={props.type || 'button'}
+            disabled={props.disabled || props.loading}
+            className={buttonClass}
+        >
+            {props.loading ? (
+                <div className="flex items-center justify-center gap-2">
+                    <div className="w-3 h-3 md:w-4 md:h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                    درحال بارگذاری...
+                </div>
+            ) : (
+                props.children || props.label
+            )}
         </button>
     )
-})
+}
 
 export default Button