detail modal task

2026-06-16 16:31:49 +03:30
parent 8518662eee
commit c6559b3054
9 changed files with 194 additions and 5 deletions
@@ -0,0 +1,49 @@
+import { Calendar, Paperclip2, Profile2User, Tag, TickSquare, type Icon } from "iconsax-react";
+import { type FC } from "react";
+import { useTranslation } from "react-i18next";
+import type { TaskDetailTab } from "./types";
+
+type TabItem = {
+  id: TaskDetailTab;
+  icon: Icon;
+  labelKey: string;
+};
+
+const TABS: TabItem[] = [
+  { id: "labels", icon: Tag, labelKey: "taskmanager.task_detail.labels" },
+  { id: "users", icon: Profile2User, labelKey: "taskmanager.task_detail.user_management" },
+  { id: "checklist", icon: TickSquare, labelKey: "taskmanager.task_detail.checklist" },
+  { id: "attachment", icon: Paperclip2, labelKey: "taskmanager.task_detail.attachment" },
+  { id: "date", icon: Calendar, labelKey: "taskmanager.task_detail.date_settings" },
+];
+
+type Props = {
+  activeTab: TaskDetailTab | null;
+  onTabChange: (tab: TaskDetailTab) => void;
+};
+
+const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange }) => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {TABS.map(({ id, icon: Icon, labelKey }) => {
+        const isActive = activeTab === id;
+
+        return (
+          <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]"}`}
+          >
+            <Icon size={16} color="#292D32" />
+            <span>{t(labelKey)}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default TaskDetailActionBar;