danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update style default modal + added date in modal
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-17 16:40:08 +03:30
parent 73d1ad3492
commit 19d60a9225
7 changed files with 70 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
+29 -6
View File
@@ -1,20 +1,25 @@
import { Add } from "iconsax-react";
import { type FC } from "react";
import type DateObject from "react-date-object";
import { useTranslation } from "react-i18next";
import AvatarImage from "../../../../assets/images/avatar_image.png";
import { formatDateRange } from "./date/utils";
import type { TaskLabel } from "./labels/types";
import type { TaskUser } from "./users/types";
type Props = {
selectedLabels: TaskLabel[];
selectedUsers: TaskUser[];
startDate: DateObject | null;
endDate: DateObject | null;
};
const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate }) => {
const { t } = useTranslation("global");
const dateLabel = formatDateRange(startDate, endDate);
return (
<div className="mt-4 grid grid-cols-2 gap-4">
<div className="mt-7 flex gap-10">
<div>
<div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
<div className="flex items-center gap-2 flex-wrap">
@@ -32,7 +37,10 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
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" />
<Add
size={14}
color="#292D32"
/>
</button>
</div>
</div>
@@ -41,8 +49,15 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
<div className="text-xs font-medium mb-2">{t("taskmanager.users")}</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
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
@@ -50,10 +65,18 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
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" />
<Add
size={14}
color="#292D32"
/>
</button>
</div>
</div>
<div>
<div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
{dateLabel ? <span className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32]">{dateLabel}</span> : null}
</div>
</div>
);
};