feat: add EditButton component with custom tooltip and styled icon

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

Author: amitamrutiya

src/custom/Workspaces/EditButton.tsx

@@ -0,0 +1,24 @@
+import { IconButton } from '@mui/material';
+import React from 'react';
+import { CustomTooltip } from '../CustomTooltip';
+import { L5EditIcon } from './styles';
+
+interface EditButtonProps {
+  onClick: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+  title?: string;
+}
+
+const EditButton: React.FC<EditButtonProps> = ({ onClick, disabled, title = 'Edit' }) => {
+  return (
+    <CustomTooltip title={title}>
+      <div>
+        <IconButton onClick={onClick} disabled={disabled} size="small" sx={{ ml: 1 }}>
+          <L5EditIcon />
+        </IconButton>
+      </div>
+    </CustomTooltip>
+  );
+};
+
+export default EditButton;

src/custom/Workspaces/styles.ts

@@ -1,6 +1,34 @@
-import { styled } from '../../theme';
+import EditIcon from '@mui/icons-material/Edit';
+import { buttonDisabled, styled } from '../../theme';
+import { HOVER_DELETE } from '../../theme/colors/colors';
 
 export const ModalActionDiv = styled('div')({
   display: 'flex',
   gap: '1rem'
 });
+
+interface ExtendedEditIconProps {
+  disabled?: boolean;
+  bulk?: boolean;
+  style?: React.CSSProperties;
+}
+
+export const L5EditIcon = styled(EditIcon)<ExtendedEditIconProps>(
+  ({ disabled, bulk, style, theme }) => ({
+    color: disabled ? theme.palette.icon.disabled : theme.palette.text.secondary,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    width: bulk ? '32' : '28.8',
+    height: bulk ? '32' : '28.8',
+    '&:hover': {
+      color: disabled ? buttonDisabled : HOVER_DELETE,
+      '& svg': {
+        color: disabled ? buttonDisabled : HOVER_DELETE
+      }
+    },
+    '& svg': {
+      color: theme.palette.error.main,
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    },
+    ...style
+  })
+);