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

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, startDate, endDate }) => {
  const { t } = useTranslation("global");
  const dateLabel = formatDateRange(startDate, endDate);

  return (
    <div className="mt-5 sm:mt-7 grid grid-cols-[auto_auto] gap-x-6 gap-y-4 sm:flex sm:flex-wrap sm:gap-x-10 sm:gap-y-4">
      <div className="min-w-0">
        <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 shrink-0"
            aria-label={t("taskmanager.task_detail.new_label")}
          >
            <Add
              size={14}
              color="#292D32"
            />
          </button>
        </div>
      </div>

      <div className="min-w-0">
        <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 shrink-0"
            >
              <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 shrink-0"
            aria-label={t("taskmanager.users")}
          >
            <Add
              size={14}
              color="#292D32"
            />
          </button>
        </div>
      </div>

      <div className="col-span-2 sm:col-span-1 min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
        {dateLabel ? (
          <span className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32] whitespace-nowrap">
            {dateLabel}
          </span>
        ) : null}
      </div>
    </div>
  );
};

export default TaskDetailMetadataPreview;