feat: add UsersTable and TooltipIconButton components with customizable properties

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/TooltipIconButton/TooltipIconButton.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { IconButton } from '../../base/IconButton';
+import { useTheme } from '../../theme';
+import { CustomTooltip } from '../CustomTooltip';
+import { IconWrapper } from '../ResponsiveDataTable';
+
+interface TooltipIconProps {
+  title: string;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  icon?: React.ReactNode;
+  arrow?: boolean;
+  style?: React.CSSProperties;
+  iconType?: string;
+  id?: string;
+  placement?: 'bottom' | 'top' | 'left' | 'right';
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export function TooltipIcon({
+  children,
+  title,
+  onClick,
+  icon,
+  style,
+  arrow = true,
+  disabled = false,
+  iconType,
+  id,
+  placement
+}: TooltipIconProps): JSX.Element {
+  const theme = useTheme();
+
+  return (
+    <CustomTooltip title={title} arrow={arrow} placement={placement} id={id}>
+      <IconWrapper disabled={disabled}>
+        <IconButton
+          disabled={disabled}
+          onClick={onClick}
+          sx={{
+            '&:hover': {
+              '& svg': {
+                fill:
+                  iconType === 'delete'
+                    ? theme.palette.error.main
+                    : theme.palette.primary.brand?.default
+              }
+            },
+            ...style
+          }}
+          disableRipple
+        >
+          {icon || children}
+        </IconButton>
+      </IconWrapper>
+    </CustomTooltip>
+  );
+}
+
+export default TooltipIcon;

src/custom/TooltipIconButton/index.ts

@@ -0,0 +1,3 @@
+import TooltipIcon from './TooltipIconButton';
+
+export { TooltipIcon };

src/custom/UserSearchField/UserSearchFieldInput.tsx

@@ -62,6 +62,23 @@ const UserSearchField: React.FC<UserSearchFieldProps> = ({
   usersSearch,
   setUsersSearch
 }) => {
+  console.log('amit usersearchfield', {
+    usersData,
+    setUsersData,
+    label,
+    setDisableSave,
+    handleNotifyPref,
+    notifyUpdate,
+    isCreate,
+    searchType,
+    disabled,
+    currentUserData,
+    searchedUsers,
+    isUserSearchLoading,
+    fetchSearchedUsers,
+    usersSearch,
+    setUsersSearch
+  });
   const [error, setError] = useState('');
   const [open, setOpen] = useState(false);
   const [showAllUsers, setShowAllUsers] = useState(false);