Updated ToolCard with truncateString utils function for better UI

frontend/components/ToolCard/ToolCard.jsx

@@ -1,21 +1,20 @@
 import { Card, Grid, Typography } from '@mui/material';
-
 import Image from 'next/image';
-
 import { useRouter } from 'next/router';
 
 import ToolImage from '@/assets/images/BookImage.png';
 
 import styles from './styles';
 
+import { truncateString } from '@/utils/MiscellaneousUtils';
+
 /**
  * Returns a Tool Card component with an image and a chip displaying the amount of coins.
  *
  * @return {JSX.Element} The Tool Card component.
  */
 const ToolCard = (props) => {
   const { maskedToolUrl, backgroundImgURL, name, logo, description } = props;
-
   const router = useRouter();
 
   const handleRoute = () => {
@@ -25,20 +24,20 @@ const ToolCard = (props) => {
   const renderImage = () => {
     return (
       <Grid {...styles.imageGridProps}>
-        <Image
-          src={logo || ToolImage}
-          alt="marvel logo"
-          {...styles.imageProps}
-        />
+        <Image src={logo || ToolImage} alt="tool logo" {...styles.imageProps} />
       </Grid>
     );
   };
 
   const renderTitle = () => {
     return (
       <Grid {...styles.contentGridProps}>
-        <Typography {...styles.titleProps}>{name}</Typography>
-        <Typography {...styles.descriptionProps}>{description}</Typography>
+        <Typography {...styles.titleProps}>
+          {truncateString({ str: name, num: 20 })}
+        </Typography>
+        <Typography {...styles.descriptionProps}>
+          {truncateString({ str: description, num: 100 })}
+        </Typography>
       </Grid>
     );
   };

frontend/utils/MiscellaneousUtils.js

@@ -206,12 +206,13 @@ const getRandomBackgroundColor = () => {
  * @param {string} [suffix='...'] - The suffix to append to the truncated string.
  * @return {string} The truncated string with the suffix.
  */
-function truncateString(str, num, suffix = '...') {
+const truncateString = (props) => {
+  const { str, num, suffix = '...' } = props;
   if (str.length <= num) {
     return str;
   }
   return str.slice(0, num - suffix.length) + suffix;
-}
+};
 
 /**
  * Copies content to the clipboard.