File size: 1,851 Bytes
3201ca6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import CircleIcon from "#/icons/u-circle.svg?react";
import CheckCircleIcon from "#/icons/u-check-circle.svg?react";
import CheckCircleHalfIcon from "#/icons/u-check-circle-half.svg?react";
import { I18nKey } from "#/i18n/declaration";
import { cn } from "#/utils/utils";
import { Typography } from "#/ui/typography";
interface TaskItemProps {
task: {
id: string;
title: string;
status: "todo" | "in_progress" | "done";
notes?: string;
};
}
export function TaskItem({ task }: TaskItemProps) {
const { t } = useTranslation("openhands");
const icon = useMemo(() => {
switch (task.status) {
case "todo":
return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
case "in_progress":
return <CheckCircleHalfIcon className="w-4 h-4 text-[#ffffff]" />;
case "done":
return <CheckCircleIcon className="w-4 h-4 text-[var(--oh-muted)]" />;
default:
return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
}
}, [task.status]);
const isDoneStatus = task.status === "done";
return (
<div className="flex gap-2 items-center w-full" data-name="item">
<div className="shrink-0">{icon}</div>
<div className="flex flex-col items-start justify-center leading-[16px] text-nowrap whitespace-pre font-normal">
<Typography.Text
className={cn(
"text-[12px]",
isDoneStatus ? "text-[var(--oh-muted)]" : "text-white",
)}
>
{task.title}
</Typography.Text>
{task.notes && (
<Typography.Text className="text-[10px] text-[var(--oh-muted)]">
{t(I18nKey.TASK_TRACKING_OBSERVATION$TASK_NOTES)}: {task.notes}
</Typography.Text>
)}
</div>
</div>
);
}
|