create com button

src/components/uikit/button/index.tsx

@@ -2,12 +2,12 @@
 import React, { ButtonHTMLAttributes, ReactNode } from 'react';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode; // Make children optional for icon-only buttons
+  children?: ReactNode;
   loading?: boolean;
   disabled?: boolean;
   endIcon?: ReactNode;
-  size?: 'small' | 'medium' | 'large'; // Add size prop
-  iconOnly?: boolean; // Add iconOnly prop
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'solid' | 'text';
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -15,33 +15,16 @@ const Button: React.FC<ButtonProps> = ({
   loading = false,
   disabled = false,
   endIcon,
-  size = 'medium', // Default size to medium
-  iconOnly = false, // Default iconOnly to false
+  size = 'medium',
+  variant = 'solid',
   className,
   ...props
 }) => {
-  const baseStyles =
-    'inline-flex items-center justify-center border border-transparent font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 ';
-  const enabledStyles =
-    'text-white bg-primary-light hover:bg-indigo-700 active:bg-indigo-800 focus:ring-indigo-500';
-  const disabledStyles = 'text-gray-400 bg-gray-200 cursor-not-allowed';
-  const loadingStyles = 'text-gray-400 bg-gray-200 cursor-wait';
-
-  const sizeStyles = {
-    small: iconOnly ? 'p-2 text-sm' : 'px-3 py-1.5 text-sm',
-    medium: iconOnly ? 'p-2.5 text-base' : 'px-4 py-2 text-base',
-    large: iconOnly ? 'p-3 text-lg' : 'px-6 py-3 text-lg',
-  };
-
-  const currentStyles = disabled
-    ? disabledStyles
-    : loading
-      ? loadingStyles
-      : enabledStyles;
 
+ 
   return (
     <button
-      className={`${baseStyles} ${sizeStyles[size]} ${currentStyles} ${className || 'bg-gray-500 '}`}
+      className={`group relative bg-[#FA003F] rounded-[0.5625rem] h-12 p-px flex ${className || ''}`}
       disabled={disabled || loading}
       {...props}
     >
@@ -67,11 +50,17 @@ const Button: React.FC<ButtonProps> = ({
           ></path>
         </svg>
       ) : null}
-      {children && !iconOnly ? children : null}
-      {endIcon && !loading && !iconOnly ? (
-        <span className="ml-2">{endIcon}</span>
+     
+       <div className={`rounded-lg bg-white text-[#222222] flex items-center justify-center px-3 `}>
+        {children}
+       </div>
+     
+      {endIcon && !loading ? (
+        <span className=" flex items-center justify-center p-3">
+          {endIcon}
+        </span>
       ) : null}
-      {iconOnly && endIcon && !loading ? endIcon : null}
+   
     </button>
   );
 };