refactor tab component

src/components/UI/Tag.tsx

@@ -2,14 +2,27 @@ import React, { ReactNode } from "react";
 
 type TagProps = {
   children: ReactNode;
- colorClass: string;
- className?: string;
+  color: string;
+  className?: string;
 };
 
-export const Tag: React.FC<TagProps> = ({ children,colorClass,className} ) => {
+export const Tag: React.FC<TagProps> = ({ children, color, className }) => {
+  const getColorClass = () => {
+    switch (color) {
+      case "red":
+        return "border-red-400 text-red-400 bg-red-700/20";
+      case "teal":
+        return "border-teal-400 text-teal-400  bg-teal-700/20";
+      case "yellow":
+        return "border-yellow-400 text-yellow-400  bg-yellow-700/20";
+
+      default:
+        return "border-gray-400 text-gray-400";
+    }
+  };
   return (
     <div
-      className={`border ${colorClass} ${className} min-w-max flex justify-center items-center rounded-full px-2 max-sm:px-1 max-sm:text-xs`}
+      className={`border $ ${getColorClass()} min-w-max flex justify-center items-center rounded-full px-2 max-sm:px-1 max-sm:text-xs`}
     >
       {children}
     </div>

src/components/task/Task.tsx

@@ -37,14 +37,14 @@ export const Task: React.FC<taskProps> = ({
   const getColor = () => {
     switch (task.priority) {
       case "high":
-        return "border-red-400 text-red-400 bg-red-700/20";
+        return "red";
       case "medium":
-        return "border-teal-400 text-teal-400  bg-teal-700/20";
+        return "teal";
       case "low":
-        return "border-yellow-400 text-yellow-400  bg-yellow-700/20";
+        return "yellow";
 
       default:
-        return "border-gray-400 text-gray-400";
+        return "gray";
     }
   };
 
@@ -102,7 +102,7 @@ export const Task: React.FC<taskProps> = ({
         id="task-right-block"
         className="flex justify-end items-center gap-3 max-sm:gap-2"
       >
-        <Tag className="" colorClass={getColor()}>
+        <Tag className="" color={getColor()}>
           {task.priority}
         </Tag>
         <div