75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { cn } from "../../../lib/cn";
|
||
import { IconError, IconSuccess } from "../../../assets/icons/missions";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
export interface MissionItemProps {
|
||
id: number;
|
||
authorId: number;
|
||
name: string;
|
||
difficulty: "Easy" | "Medium" | "Hard";
|
||
tags: string[];
|
||
timeLimit: number;
|
||
memoryLimit: number;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
type: "first" | "second";
|
||
status: "empty" | "success" | "error";
|
||
}
|
||
|
||
export function formatMilliseconds(ms: number): string {
|
||
const rounded = Math.round(ms) / 1000;
|
||
const formatted = rounded.toString().replace(/\.?0+$/, '');
|
||
return `${formatted} c`;
|
||
}
|
||
|
||
export function formatBytesToMB(bytes: number): string {
|
||
const megabytes = Math.floor(bytes / (1024 * 1024));
|
||
return `${megabytes} МБ`;
|
||
}
|
||
|
||
const MissionItem: React.FC<MissionItemProps> = ({
|
||
id, name, difficulty, timeLimit, memoryLimit, type, status
|
||
}) => {
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<div className={cn("h-[44px] w-full relative rounded-[10px] text-liquid-white",
|
||
type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
|
||
"grid grid-cols-[80px,1fr,1fr,60px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center",
|
||
status == "error" && "border-l-[11px] border-l-liquid-red pl-[9px]",
|
||
status == "success" && "border-l-[11px] border-l-liquid-green pl-[9px]",
|
||
"cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300",
|
||
)}
|
||
onClick={() => {navigate(`/mission/${id}`)}}
|
||
>
|
||
<div className="text-[18px] font-bold">
|
||
#{id}
|
||
</div>
|
||
<div className="text-[18px] font-bold">
|
||
{name}
|
||
</div>
|
||
<div className="text-[12px] text-right">
|
||
стандартный ввод/вывод {formatMilliseconds(timeLimit)}, {formatBytesToMB(memoryLimit)}
|
||
</div>
|
||
<div className={cn(
|
||
"text-center text-[18px]",
|
||
difficulty == "Hard" && "text-liquid-red",
|
||
difficulty == "Medium" && "text-liquid-orange",
|
||
difficulty == "Easy" && "text-liquid-green",
|
||
)}>
|
||
{difficulty}
|
||
</div>
|
||
<div className="h-[24px] w-[24px]">
|
||
{
|
||
status == "error" && <img src={IconError}/>
|
||
}
|
||
{
|
||
status == "success" && <img src={IconSuccess}/>
|
||
}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MissionItem;
|