manage users

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

@@ -3,12 +3,14 @@ import { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import AvatarImage from "../../../../assets/images/avatar_image.png";
 import type { TaskLabel } from "./labels/types";
+import type { TaskUser } from "./users/types";
 
 type Props = {
   selectedLabels: TaskLabel[];
+  selectedUsers: TaskUser[];
 };
 
-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
   const { t } = useTranslation("global");
 
   return (
@@ -37,10 +39,12 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
 
       <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>
+        <div className="flex items-center gap-2 flex-wrap">
+          {selectedUsers.map((user) => (
+            <div key={user.id} className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
+              <img src={user.avatar ?? AvatarImage} alt={user.name} 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"