Add update button and tooltips to IconButtons

src/components/generic/Modal.tsx

@@ -11,12 +11,14 @@ import { Card } from './Card';
 export interface ModalProps {
   title: string;
   onClose: () => void;
+  actions?: React.ReactNode;
   children: React.ReactNode;
 }
 
 export const Modal = ({
   title,
   onClose,
+  actions,
   children,
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
@@ -43,7 +45,10 @@ export const Modal = ({
               <div className="text-2xl font-medium dark:text-white">
                 {title}
               </div>
-              <IconButton icon={<FiX />} onClick={onClose} />
+              <div className="flex gap-2">
+                {actions}
+                <IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
+              </div>
             </div>
             {children}
           </Card>

src/components/generic/button/IconButton.tsx

@@ -1,35 +1,43 @@
 import type React from 'react';
 
+import { Tooltip } from '@components/generic/Tooltip';
+
 type DefaulButtonProps = JSX.IntrinsicElements['button'];
 
 export interface IconButtonProps extends DefaulButtonProps {
   icon: React.ReactNode;
+  tooltip?: string;
   active?: boolean;
 }
 
 export const IconButton = ({
   icon,
   active,
+  tooltip,
   disabled,
   ...props
 }: IconButtonProps): JSX.Element => {
   return (
-    <div className="my-auto text-gray-500 dark:text-gray-400">
-      <button
-        type="button"
-        disabled={disabled}
-        className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${
-          active
-            ? 'bg-gray-200 dark:bg-gray-600'
-            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
-        } ${
-          disabled ? 'cursor-not-allowed text-gray-400 dark:text-gray-700' : ''
-        }`}
-        {...props}
-      >
-        {icon}
-        <span className="sr-only">Refresh</span>
-      </button>
-    </div>
+    <Tooltip disabled={!tooltip} content={tooltip}>
+      <div className="my-auto text-gray-500 dark:text-gray-400">
+        <button
+          type="button"
+          disabled={disabled}
+          className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${
+            active
+              ? 'bg-gray-200 dark:bg-gray-600'
+              : 'hover:bg-gray-200 dark:hover:bg-gray-600'
+          } ${
+            disabled
+              ? 'cursor-not-allowed text-gray-400 dark:text-gray-700'
+              : ''
+          }`}
+          {...props}
+        >
+          {icon}
+          <span className="sr-only">Refresh</span>
+        </button>
+      </div>
+    </Tooltip>
   );
 };