incoporated review suggestions

components/tools/CardData.tsx

@@ -50,6 +50,7 @@ export const CardData = ({
   };
   const domNode = useRef<HTMLSpanElement>(null);
 
+  // Decide whether to show full description or not in the card based on the number of lines occupied by the description.
   useEffect(() => {
     const divHeight = domNode.current?.offsetHeight || 0;
     const numberOfLines = divHeight / 20;
@@ -61,6 +62,7 @@ export const CardData = ({
     }
   }, [visible]);
 
+  // Decide whether the user click outside this component (card description) or not.
   useEffect(() => {
     const maybeHandler = (event: MouseEvent) => {
       setOutsideClick(true);

components/tools/CategoryDropdown.tsx

@@ -26,7 +26,6 @@ export default function CategoryDropdown({ setopenCategory }: CategoryDropdownPr
                 <a href={`#${categoryName}`} key={index} className='block px-4 py-2 hover:bg-gray-100' data-testid='CategoryDropdown-link'>{categoryName}</a>
               </div>);
           }
-
           return null;
         })}
       </div>

components/tools/Tags.tsx

@@ -5,7 +5,7 @@ interface SelectTagsProps {
 };
 
 /**
- * @description This component displays tags.
+ * @description This component displays tags. These tags are displayed for languages and technologies in the tools card.
  *
  * @param {SelectTagsProps} props - The props for the Select Tags component.
  * @param {string} props.name - The content to be displayed inside the tag.

components/tools/ToolsList.tsx

@@ -20,24 +20,26 @@ export default function ToolsList({ toolsListData }: ToolsListProp) {
   return (
     <div className='' data-testid='ToolsList-main' >
       {Object.keys(toolsListData).map((categoryName, index) => {
-        if (toolsListData[categoryName].toolsList.length > 0) return (
-          <div className='my-8' key={index} id={categoryName}>
-            <Heading typeStyle={HeadingTypeStyle.mdSemibold} className='my-2' >
-              {categoryName}
-            </Heading>
-            <Paragraph typeStyle={ParagraphTypeStyle.sm}>
-              {toolsListData[categoryName].description}
-            </Paragraph>
-            <hr className='my-8' />
-            <div className='flex grid-cols-3 flex-col gap-8 lg:grid'>
-              {toolsListData[categoryName].toolsList.map((tool, toolIndex) => (
-                <ToolsCard key={toolIndex} toolData={tool} />
-              ))}
+        if (toolsListData[categoryName].toolsList.length > 0) {
+          return (
+            <div className='my-8' key={index} id={categoryName}>
+              <Heading typeStyle={HeadingTypeStyle.mdSemibold} className='my-2' >
+                {categoryName}
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.sm}>
+                {toolsListData[categoryName].description}
+              </Paragraph>
+              <hr className='my-8' />
+              <div className='flex grid-cols-3 flex-col gap-8 lg:grid'>
+                {toolsListData[categoryName].toolsList.map((tool, toolIndex) => (
+                  <ToolsCard key={toolIndex} toolData={tool} />
+                ))}
+              </div>
             </div>
-          </div>
-        );
-
-        return null;
+          );
+        } else {
+          return null;
+        }
       })}
     </div>
   );

scripts/tools/categorylist.ts → scripts/tools/categorylist.js

@@ -1,7 +1,5 @@
-import { Category } from "@/types/components/tools/ToolDataType";
-
 // Various categories to define the category in which a tool has to be listed
-const categoryList: Category[] = [
+const categoryList = [
   {
     name: "APIs",
     tag: "api",