detail modal task

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

@@ -0,0 +1,44 @@
+import { type FC, useEffect, useState } from "react";
+import DefaulModal from "../../../../components/DefaulModal";
+import type { Task } from "../../types";
+import TaskDetailActionBar from "./TaskDetailActionBar";
+import TaskDetailDescription from "./TaskDetailDescription";
+import TaskDetailHeader from "./TaskDetailHeader";
+import type { TaskDetailTab } from "./types";
+
+type Props = {
+  open: boolean;
+  task: Task | null;
+  statusLabel: string;
+  onClose: () => void;
+};
+
+const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
+  const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    if (!open) {
+      setActiveTab(null);
+      setDescription("");
+    }
+  }, [open]);
+
+  if (!task) return null;
+
+  return (
+    <DefaulModal open={open} close={onClose} width={680}>
+      <TaskDetailHeader statusLabel={statusLabel} onClose={onClose} />
+
+      <h2 className="mt-6 text-sm font-bold">{task.title}</h2>
+
+      <div className="mt-4">
+        <TaskDetailActionBar activeTab={activeTab} onTabChange={setActiveTab} />
+      </div>
+
+      <TaskDetailDescription value={description} onChange={setDescription} />
+    </DefaulModal>
+  );
+};
+
+export default TaskDetailModal;