task detail Labels

src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx

@@ -1,5 +1,5 @@
 import { Calendar, Paperclip2, Profile2User, Tag, TickSquare, type Icon } from "iconsax-react";
-import { type FC } from "react";
+import { type FC, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TaskDetailTab } from "./types";
 
@@ -20,9 +20,10 @@ const TABS: TabItem[] = [
 type Props = {
   activeTab: TaskDetailTab | null;
   onTabChange: (tab: TaskDetailTab) => void;
+  labelsPopover?: ReactNode;
 };
 
-const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange }) => {
+const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover }) => {
   const { t } = useTranslation("global");
 
   return (
@@ -30,17 +31,31 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange }) => {
       {TABS.map(({ id, icon: Icon, labelKey }) => {
         const isActive = activeTab === id;
 
-        return (
+        const button = (
           <button
-            key={id}
             type="button"
             onClick={() => onTabChange(id)}
-            className={`flex items-center gap-1.5 border border-white rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-white text-black" : "bg-white/50 text-[#292D32]"}`}
+            className={`flex items-center gap-1.5 border rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-[#4A4A4A] text-white border-transparent" : "bg-white/50 text-[#292D32] border-white"}`}
           >
-            <Icon size={16} color="#292D32" />
+            <Icon size={16} color={isActive ? "#FFFFFF" : "#292D32"} />
             <span>{t(labelKey)}</span>
           </button>
         );
+
+        if (id === "labels") {
+          return (
+            <div key={id} className="relative">
+              {button}
+              {labelsPopover}
+            </div>
+          );
+        }
+
+        return (
+          <div key={id}>
+            {button}
+          </div>
+        );
       })}
     </div>
   );