refactor: badge logic related to readability

[wit03]

          _:hammer_and_wrench: Refactor suggestion_

Optimize the category badge rendering logic

In the category mapping starting at line 147, the logic to determine if a category is selected is unnecessarily complex. You can simplify the check by directly using includes method on the checkBox.category array.

Apply this diff to simplify the code:

-{category.map((item, i) => (
+{category.map((item, index) => (
   <div
     data-tooltip-id={item.name}
-    key={i}
+    key={index}
     className={`
       lg:block h-10 group relative ctn-category shadow
       hover:bg-secondaryRed hover:text-primaryRed hover:border hover:border-primaryRed
       border rounded-full px-3 py-2 cursor-pointer transition-colors self-center shrink-0
-      ${
-        checkBox.category.some(
-          (elem) =>
-            elem ===
-            category.find(
-              (elem) => elem.name === item.name
-            )?.name
-        )
-          ? 'bg-secondaryRed text-primaryRed border-secondaryRed'
-          : 'text-slate-900 border'
-      }
+      ${checkBox.category.includes(item.name) ? 'bg-secondaryRed text-primaryRed border-secondaryRed' : 'text-slate-900 border'}
     `}
     onClick={() => {
       handleChangeCategory(item.name)
     }}
   >
     <p className=" text-sm font-normal ">{item.name}</p>
   </div>
 ))}

This change simplifies the conditional logic and improves code readability.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

          {category.map((item, index) => (
            <div
              data-tooltip-id={item.name}
              key={index}
              className={`
                            lg:block h-10 group relative ctn-category shadow-
                            hover:bg-secondaryRed hover:text-primaryRed hover:border hover:border-primaryRed
                            border rounded-full px-3 py-2 cursor-pointer transition-colors self-center shrink-0
                            ${checkBox.category.includes(item.name) ? 'bg-secondaryRed text-primaryRed border-secondaryRed' : 'text-slate-900 border'}
                                                    `}
              onClick={() => {
                handleChangeCategory(item.name)
              }}
            >
              <p className=" text-sm font-normal ">{item.name}</p>
            </div>
          ))}

Originally posted by @coderabbitai[bot] in #46 (comment)