refactored_pop_ups

ita-social-projects · Nov 16, 2023 · 06e31d7 · 06e31d7
1 parent c75be17
commit 06e31d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx b/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx
@@ -34,6 +34,7 @@ const IconExtensionWithTitle: FC<IconExtensionWithTitleProps> = ({
         description={size ? convertSize(size) : description}
         style={styles.titleWithDescription}
         title={title}
+        useTooltip
       />
     </Box>
   )

diff --git a/src/components/title-with-description/TitleWithDescription.tsx b/src/components/title-with-description/TitleWithDescription.tsx
@@ -5,7 +5,6 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
 import { styles } from '~/components/title-with-description/TitleWithDescription.styles'
-import { ComponentEnum } from '~/types'
 
 interface TitleWithDescriptionProps {
   title: string | ReactElement
@@ -15,31 +14,37 @@ interface TitleWithDescriptionProps {
     title?: SxProps
     description?: SxProps
   }
+  useTooltip?: boolean
 }
 
 const TitleWithDescription = ({
   title,
   description,
-  style = styles
+  style = styles,
+  useTooltip = false
 }: TitleWithDescriptionProps) => {
   const [tooltipVisible, setTooltipVisible] = useState<boolean>(false)
 
   const handleTooltip = () => setTooltipVisible((prevState) => !prevState)
-
-  return (
-    <Box sx={style.wrapper}>
-      <Typography sx={style.title}>{title}</Typography>
-      <Tooltip open={tooltipVisible} placement='bottom' title={description}>
-        <Typography
-          component={ComponentEnum.Span}
-          onClick={handleTooltip}
-          sx={style.description}
-        >
-          {description}
-        </Typography>
-      </Tooltip>
-    </Box>
-  )
+  if (useTooltip) {
+    return (
+      <Box sx={style.wrapper}>
+        <Typography sx={style.title}>{title}</Typography>
+        <Tooltip open={tooltipVisible} placement='bottom' title={description}>
+          <Typography onClick={handleTooltip} sx={style.description}>
+            {description}
+          </Typography>
+        </Tooltip>
+      </Box>
+    )
+  } else {
+    return (
+      <Box sx={style.wrapper}>
+        <Typography sx={style.title}>{title}</Typography>
+        <Typography sx={style.description}>{description}</Typography>
+      </Box>
+    )
+  }
 }
 
 export default TitleWithDescription