task detail Labels

2026-06-17 09:45:04 +03:30
parent c6559b3054
commit 021285bc09
11 changed files with 410 additions and 9 deletions
@@ -0,0 +1,57 @@
+import { Add } from "iconsax-react";
+import { type FC } from "react";
+import { useTranslation } from "react-i18next";
+import AvatarImage from "../../../../assets/images/avatar_image.png";
+import type { TaskLabel } from "./labels/types";
+
+type Props = {
+  selectedLabels: TaskLabel[];
+};
+
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="mt-4 grid grid-cols-2 gap-4">
+      <div>
+        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
+        <div className="flex items-center gap-2 flex-wrap">
+          {selectedLabels.map((label) => (
+            <span
+              key={label.id}
+              className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium"
+              style={{ backgroundColor: label.color }}
+            >
+              {label.title}
+            </span>
+          ))}
+          <button
+            type="button"
+            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            aria-label={t("taskmanager.task_detail.new_label")}
+          >
+            <Add size={14} color="#292D32" />
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
+        <div className="flex items-center gap-2">
+          <div className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
+            <img src={AvatarImage} alt="" className="size-full object-cover" />
+          </div>
+          <button
+            type="button"
+            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            aria-label={t("taskmanager.users")}
+          >
+            <Add size={14} color="#292D32" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailMetadataPreview;