Merge pull request #2 from oslabs-beta/tooltip

Modularize Tooltip

Author: ViaLeeny

app/src/components/Tooltip.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+interface TooltipProps {
+  label: string;
+  isCollabTab: boolean;
+  children: React.ReactNode;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ label, isCollabTab, children }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const handleMouseEnter = () => {
+    setShowTooltip(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      {children}
+      {showTooltip && (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: isCollabTab ? '120px' : 'none',
+            marginTop: !isCollabTab ? '45px' : 'none',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            padding: '5px 10px',
+            backgroundColor: '#333',
+            color: '#f0f0f0',
+            borderRadius: '4px',
+            fontSize: '11px',
+            textTransform: 'none',
+            whiteSpace: 'nowrap',
+            zIndex: 1,
+            transition: 'opacity 0.3s ease'
+          }}
+        >
+          {label}
+          <div
+            style={{
+              position: 'absolute',
+              top: isCollabTab ? '100%' : '-5px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: '0',
+              height: '0',
+              borderLeft: '5px solid transparent',
+              borderRight: '5px solid transparent',
+              borderBottom: !isCollabTab ? '5px solid #333' : 'none',
+              borderTop: isCollabTab ? '5px solid #333' : 'none'
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

app/src/components/left/TabWithTooltip.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Tab } from '@mui/material';
 import { AddBox, Folder, Groups2 } from '@mui/icons-material';
+import Tooltip from '../Tooltip';
 
 interface TabWithTooltipProps {
   label: string;
@@ -13,18 +14,8 @@ const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
   label,
   value,
   activeTab,
-  handleTabChange
+  handleTabChange,
 }) => {
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const handleMouseEnter = () => {
-    setShowTooltip(true);
-  };
-
-  const handleMouseLeave = () => {
-    setShowTooltip(false);
-  };
-
   let iconType;
   if (value === 0) {
     iconType = <Folder sx={{ fontSize: '25px' }} />;
@@ -37,63 +28,25 @@ const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
   const isCollabTab = label === 'Collab';
 
   return (
-    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      {/* Tooltip */}
-      {showTooltip && (
-        <div
-          style={{
-            position: 'absolute',
-            bottom: isCollabTab ? '120px' : 'none',
-            marginTop: !isCollabTab ? '45px' : 'none',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            padding: '5px 10px',
-            backgroundColor: '#333',
-            color: '#f0f0f0',
-            borderRadius: '4px',
+    <div>
+      <Tooltip label={label} isCollabTab={isCollabTab}>
+        <Tab
+          sx={{
+            color: activeTab === value ? '#f88e16' : '#9C9D9F',
+            backgroundColor: activeTab === value && '#2D313A',
+            '&.Mui-selected': { color: '#f88e16' },
+            '&:hover': { color: '#f88e16' },
             fontSize: '11px',
             textTransform: 'none',
-            whiteSpace: 'nowrap',
-            zIndex: 1,
-            transition: 'opacity 0.3s ease',
+            position: isCollabTab ? 'absolute' : 'relative',
+            bottom: isCollabTab ? '80px' : 'auto',
+            opacity: 1,
           }}
-        >
-          {label}
-          <div
-            style={{
-              position: 'absolute',
-              top: isCollabTab ? '100%' : '-5px',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              width: '0',
-              height: '0',
-              borderLeft: '5px solid transparent',
-              borderRight: '5px solid transparent',
-              borderBottom: !isCollabTab ? '5px solid #333' : 'none',
-              borderTop: isCollabTab ? '5px solid #333' : 'none',
-
-            }}
-          />
-        </div>
-      )}
-
-      {/* Tab */}
-      <Tab
-        sx={{
-          color: activeTab === value ? '#f88e16' : '#9C9D9F',
-          backgroundColor: activeTab === value && '#2D313A',
-          '&.Mui-selected': { color: '#f88e16' },
-          '&:hover': { color: '#f88e16' },
-          fontSize: '11px',
-          textTransform: 'none',
-          position: isCollabTab ? 'absolute' : 'relative',
-          bottom: isCollabTab ? '80px' : 'auto',
-          opacity: 1,
-        }}
-        icon={iconType}
-        value={value}
-        onClick={(event) => handleTabChange(event, value)}
-      />
+          icon={iconType}
+          value={value}
+          onClick={(event) => handleTabChange(event, value)}
+        />
+      </Tooltip>
     </div>
   );
 };