fix: 🐛 color picker file classname code refactor using className library

src/components/colorPicker.tsx

@@ -1,3 +1,5 @@
+import classNames from "classnames";
+
 import { colorPickerColors } from "../utils/constants";
 
 type ColorPickerProps = {
@@ -6,25 +8,48 @@ type ColorPickerProps = {
 	selectedColor: string;
 };
 
+const colorBlockWrapper = classNames(
+	"flex",
+	"cursor-pointer",
+	"items-center",
+	"space-x-1",
+);
+
+const colorBlockSelected = ({
+	colorItem,
+	selectedColor,
+}: {
+	colorItem: string;
+	selectedColor: string;
+}) =>
+	classNames("rounded-md", "p-1", "hover:bg-custom-gray-7", {
+		"bg-custom-gray-7": colorItem === selectedColor,
+	});
+
+const colorBlockItemBorder = (colorItem: string) =>
+	classNames(
+		"h-4",
+		"w-4",
+		"rounded-full",
+		"border-[1px]",
+		"p-1",
+		{ "border-gray-900": colorItem === colorPickerColors[0] },
+		{ "border-transparent": colorItem !== colorPickerColors[0] },
+	);
+
 const ColorPicker = ({
 	colorsList,
 	onChange,
 	selectedColor,
 }: ColorPickerProps) => (
-	<div className="flex cursor-pointer items-center space-x-1">
+	<div className={colorBlockWrapper}>
 		{colorsList?.map((colorItem) => (
 			<div
-				className={`rounded-md p-1 hover:bg-custom-gray-7 ${
-					colorItem === selectedColor ? "bg-custom-gray-7" : ""
-				}`}
+				className={colorBlockSelected({ colorItem, selectedColor })}
 				key={colorItem}
 			>
 				<div
-					className={`h-4 w-4 rounded-full border-[1px] p-1 ${
-						colorItem === colorPickerColors[0]
-							? "border-gray-900"
-							: "border-transparent"
-					}`}
+					className={colorBlockItemBorder(colorItem)}
 					onClick={() => onChange(colorItem)}
 					onKeyDown={() => {}}
 					role="button"