From 911b3729e17c2b083c0cfc44b7e67c37838da4ea Mon Sep 17 00:00:00 2001
From: devilkiller-ag <ashmitgupta.official@gmail.com>
Date: Wed, 27 Mar 2024 12:28:37 +0530
Subject: [PATCH] added comments:

---
 components/tools/ToolsCard.tsx | 174 +++++++++++++++++++++------------
 1 file changed, 109 insertions(+), 65 deletions(-)

diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx
index 7a724f6a391..ccac6654a36 100644
--- a/components/tools/ToolsCard.tsx
+++ b/components/tools/ToolsCard.tsx
@@ -1,7 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import TextTruncate from 'react-text-truncate';
 
-import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType';
+import type {
+  ToolData,
+  VisibleDataListType,
+} from '@/types/components/tools/ToolDataType';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
@@ -23,10 +26,12 @@ interface ToolsCardProp {
  */
 export default function ToolsCard({ toolData }: ToolsCardProp) {
   const [showDescription, setShowDescription] = useState<boolean>(false);
-  const [showMoreDescription, setShowMoreDescription] = useState<boolean>(false);
+  const [showMoreDescription, setShowMoreDescription] =
+    useState<boolean>(false);
   const [readMore, setReadMore] = useState<boolean>(false);
   const descriptionRef = useRef<HTMLDivElement>(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 = descriptionRef.current?.offsetHeight || 0;
     const numberOfLines = divHeight / 20;
@@ -53,17 +58,19 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
   const [visible, setVisible] = useState<VisibleDataListType>({
     lang: false,
     tech: false,
-    desc: false
+    desc: false,
   });
 
   return (
-    <div className='flex h-auto flex-col rounded-lg border shadow-md'>
-      <div className='mb-6 px-6 pt-8'>
-        <div className='flex flex-col gap-2'>
-          <div className='flex w-full justify-between gap-4'>
-            <Heading typeStyle={HeadingTypeStyle.smSemibold}>{toolData.title}</Heading>
+    <div className="flex h-auto flex-col rounded-lg border shadow-md">
+      <div className="mb-6 px-6 pt-8">
+        <div className="flex flex-col gap-2">
+          <div className="flex w-full justify-between gap-4">
+            <Heading typeStyle={HeadingTypeStyle.smSemibold}>
+              {toolData.title}
+            </Heading>
             <div
-              className='size-fit min-w-[5.3rem] rounded-md border border-green-600 bg-green-100 p-1 text-center text-xs text-green-600'
+              className="size-fit min-w-[5.3rem] rounded-md border border-green-600 bg-green-100 p-1 text-center text-xs text-green-600"
               onMouseEnter={() =>
                 setTimeout(() => {
                   if (!visible.desc) setVisible({ ...visible, desc: true });
@@ -71,23 +78,28 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
               }
             >
               <span
-                className='group relative'
+                className="group relative"
                 onMouseLeave={() =>
                   setTimeout(() => {
                     if (visible.desc) setVisible({ ...visible, desc: false });
                   }, 300)
                 }
               >
-                {toolData.filters?.hasCommercial === false ? 'Open Source' : 'Commercial'}
+                {toolData.filters?.hasCommercial === false
+                  ? 'Open Source'
+                  : 'Commercial'}
                 {visible.desc && (
-                  <span className='absolute -left-2/3 top-8 z-10 w-48 -translate-x-12 rounded border border-gray-200 bg-white px-2 py-1 text-left text-gray-700 shadow-md'>
-                    {Data.properties.filters.properties.hasCommercial.description}
+                  <span className="absolute -left-2/3 top-8 z-10 w-48 -translate-x-12 rounded border border-gray-200 bg-white px-2 py-1 text-left text-gray-700 shadow-md">
+                    {
+                      Data.properties.filters.properties.hasCommercial
+                        .description
+                    }
                   </span>
                 )}
               </span>
             </div>
           </div>
-          <div className='relative'>
+          <div className="relative">
             <Paragraph typeStyle={ParagraphTypeStyle.sm}>
               <div
                 ref={descriptionRef}
@@ -98,15 +110,19 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
                   }, 500)
                 }
               >
-                <TextTruncate element='span' line={3} text={toolData.description} />
+                <TextTruncate
+                  element="span"
+                  line={3}
+                  text={toolData.description}
+                />
               </div>
             </Paragraph>
             {showDescription && (
               <div
-                className='absolute top-0 z-10 w-full border border-gray-200 bg-white p-2 shadow-md'
+                className="absolute top-0 z-10 w-full border border-gray-200 bg-white p-2 shadow-md"
                 onMouseLeave={() => setShowDescription(false)}
               >
-                <Paragraph typeStyle={ParagraphTypeStyle.sm} className=''>
+                <Paragraph typeStyle={ParagraphTypeStyle.sm} className="">
                   {toolData.description}
                 </Paragraph>
               </div>
@@ -114,89 +130,109 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
           </div>
         </div>
       </div>
-      <hr className='mx-6' />
-      <div className='grow'>
+      <hr className="mx-6" />
+      <div className="grow">
         {toolData.filters?.language || toolData?.filters?.technology?.length ? (
-          <div className='my-6'>
+          <div className="my-6">
             {toolData.filters.language && (
-              <div className='mx-6 flex flex-col gap-2'>
+              <div className="mx-6 flex flex-col gap-2">
                 <CardData
-                  className='text-sm
-              text-gray-700'
-                  heading='LANGUAGE'
+                  className="text-sm
+              text-gray-700"
+                  heading="LANGUAGE"
                   data={Data.properties.filters.properties.language.description}
-                  type='lang'
+                  type="lang"
                   visible={visible}
                   setVisible={setVisible}
                   read={readMore}
                   setRead={setReadMore}
                 />
-                <div className='flex gap-2'>
+                <div className="flex gap-2">
                   {toolData.filters?.language &&
                     toolData.filters?.language.map((item, index) => (
-                      <Tag key={index} name={item.name} bgColor={item.color} borderColor={item.borderColor} />
+                      <Tag
+                        key={index}
+                        name={item.name}
+                        bgColor={item.color}
+                        borderColor={item.borderColor}
+                      />
                     ))}
                 </div>
               </div>
             )}
             {toolData.filters?.technology?.length && (
-              <div className='mx-6 my-4 flex flex-col gap-2'>
+              <div className="mx-6 my-4 flex flex-col gap-2">
                 <CardData
-                  className='text-sm text-gray-700'
-                  heading='TECHNOLOGIES'
-                  data={Data.properties.filters.properties.technology.description}
-                  type='tech'
+                  className="text-sm text-gray-700"
+                  heading="TECHNOLOGIES"
+                  data={
+                    Data.properties.filters.properties.technology.description
+                  }
+                  type="tech"
                   visible={visible}
                   setVisible={setVisible}
                   read={readMore}
                   setRead={setReadMore}
                 />
-                <div className='flex flex-wrap gap-2'>
+                <div className="flex flex-wrap gap-2">
                   {toolData.filters?.technology &&
                     toolData.filters.technology.map((item, index) => (
-                      <Tag key={index} name={item.name} bgColor={item.color} borderColor={item.borderColor} />
+                      <Tag
+                        key={index}
+                        name={item.name}
+                        bgColor={item.color}
+                        borderColor={item.borderColor}
+                      />
                     ))}
                 </div>
               </div>
             )}
           </div>
         ) : (
-          <div className='relative size-full p-8 text-center text-gray-700'>
-            <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <div className="relative size-full p-8 text-center text-gray-700">
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
               {' '}
               No further details provided{' '}
             </div>
           </div>
         )}
       </div>
-      {(toolData?.links?.repoUrl || toolData?.links?.websiteUrl || toolData?.links?.docsUrl) && (
+      {(toolData?.links?.repoUrl ||
+        toolData?.links?.websiteUrl ||
+        toolData?.links?.docsUrl) && (
         <>
-          <hr className='' />
-          <div className='flex'>
+          <hr className="" />
+          <div className="flex">
             {toolData.links.repoUrl && (
               <>
                 {onGit ? (
                   <a
-                    className='w-full cursor-pointer border-x px-1 py-6 text-center hover:bg-gray-200'
+                    className="w-full cursor-pointer border-x px-1 py-6 text-center hover:bg-gray-200"
                     href={toolData.links.repoUrl}
-                    target='_blank'
-                    rel='noreferrer'
-                    data-testid='ToolsCard-repoUrl'
+                    target="_blank"
+                    rel="noreferrer"
+                    data-testid="ToolsCard-repoUrl"
                   >
-                    <div className='m-auto flex w-fit gap-2'>
-                      <img src='/img/logos/github-black.svg' alt='GitHub' className='w-5' />
-                      <div className='text-sm text-gray-700'>View Github</div>
+                    <div className="m-auto flex w-fit gap-2">
+                      <img
+                        src="/img/logos/github-black.svg"
+                        alt="GitHub"
+                        className="w-5"
+                      />
+                      <div className="text-sm text-gray-700">View Github</div>
                     </div>
                   </a>
                 ) : (
                   <a
-                    className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                    className="w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200"
                     href={toolData.links.repoUrl}
-                    target='_blank'
-                    rel='noreferrer'
+                    target="_blank"
+                    rel="noreferrer"
                   >
-                    <div className='m-auto flex w-fit gap-2'>
-                      <div className='text-sm text-gray-700'>View Source Code</div>
+                    <div className="m-auto flex w-fit gap-2">
+                      <div className="text-sm text-gray-700">
+                        View Source Code
+                      </div>
                     </div>
                   </a>
                 )}
@@ -204,29 +240,37 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             )}
             {toolData.links.websiteUrl && (
               <a
-                className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                className="w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200"
                 href={toolData.links.websiteUrl}
-                target='_blank'
-                rel='noreferrer'
-                data-testid='ToolsCard-websiteUrl'
+                target="_blank"
+                rel="noreferrer"
+                data-testid="ToolsCard-websiteUrl"
               >
-                <div className='m-auto flex w-fit gap-2'>
-                  <img src='/img/illustrations/icons/share.svg' alt='Share' className='w-5' />
-                  <div className='text-sm text-gray-700'>Visit Website</div>
+                <div className="m-auto flex w-fit gap-2">
+                  <img
+                    src="/img/illustrations/icons/share.svg"
+                    alt="Share"
+                    className="w-5"
+                  />
+                  <div className="text-sm text-gray-700">Visit Website</div>
                 </div>
               </a>
             )}
             {toolData.links.docsUrl && (
               <a
-                className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                className="w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200"
                 href={toolData.links.docsUrl}
-                target='_blank'
-                rel='noreferrer'
-                data-testid='ToolsCard-docsUrl'
+                target="_blank"
+                rel="noreferrer"
+                data-testid="ToolsCard-docsUrl"
               >
-                <div className='m-auto flex w-fit gap-2'>
-                  <img src='/img/illustrations/icons/docs-icon.svg' alt='Docs' className='w-5' />
-                  <div className='text-sm text-gray-700'>Visit Docs</div>
+                <div className="m-auto flex w-fit gap-2">
+                  <img
+                    src="/img/illustrations/icons/docs-icon.svg"
+                    alt="Docs"
+                    className="w-5"
+                  />
+                  <div className="text-sm text-gray-700">Visit Docs</div>
                 </div>
               </a>
             )}