refactor: logic related to readability

[wit03]

          _:hammer_and_wrench: Refactor suggestion_

Refactor complex className logic for better readability

The ternary expressions used in lines 132-139 and 156-165 within the className prop are complex and can impact readability and maintainability. Consider extracting the conditional logic into variables or helper functions for clarity.

Example refactoring for lines 132-139:

+const isAllFiltersCleared = Object.values(checkBox).every(
+  (value) => value.length === 0
+)
+
 className={` 
   h-10
   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
-  ${
-    Object.keys(checkBox).every(
-      (key) =>
-        checkBox[key as keyof CheckBoxStateType]
-          .length === 0
-    )
-      ? 'bg-secondaryRed text-primaryRed border-secondaryRed'
-      : 'text-slate-900 border'
-  }
+  ${isAllFiltersCleared ? 'bg-secondaryRed text-primaryRed border-secondaryRed' : 'text-slate-900 border'}
 `}

And for lines 156-165:

+const isCategorySelected = checkBox.category.includes(item.name)
+
 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'
-  }
+  ${isCategorySelected ? 'bg-secondaryRed text-primaryRed border-secondaryRed' : 'text-slate-900 border'}
 `}

This refactoring enhances readability and makes the conditional styling logic clearer.

Also applies to: 156-165

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