95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
import { cn } from '../../../lib/cn';
|
|
// import { IconError, IconSuccess } from "../../../assets/icons/missions";
|
|
// import { useNavigate } from "react-router-dom";
|
|
|
|
export interface SubmissionItemProps {
|
|
id: number;
|
|
datetime: string;
|
|
missionId: number;
|
|
language: string;
|
|
verdict: string;
|
|
duration: number;
|
|
memory: number;
|
|
type: 'first' | 'second';
|
|
status?: 'success' | 'wronganswer' | 'timelimit';
|
|
}
|
|
|
|
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} МБ`;
|
|
}
|
|
|
|
function formatDate(dateString: string): string {
|
|
const date = new Date(dateString);
|
|
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const year = date.getFullYear();
|
|
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
|
return `${day}/${month}/${year}\n${hours}:${minutes}`;
|
|
}
|
|
|
|
const SubmissionItem: React.FC<SubmissionItemProps> = ({
|
|
id,
|
|
datetime,
|
|
missionId,
|
|
language,
|
|
verdict,
|
|
duration,
|
|
memory,
|
|
type,
|
|
status
|
|
}) => {
|
|
// const navigate = useNavigate();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
' w-full relative rounded-[10px] text-liquid-white text-center text-bold text-[16px] py-[8px]',
|
|
type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
|
|
'grid grid-cols-7 grid-flow-col gap-[20px] px-[20px] box-border items-center',
|
|
status == 'wronganswer' &&
|
|
'border-l-[11px] border-l-liquid-red pl-[9px]',
|
|
status == 'timelimit' &&
|
|
'border-l-[11px] border-l-liquid-orange 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={() => {}}
|
|
>
|
|
<div className="text-[18px] font-bold">#{id}</div>
|
|
<div className="text-[18px] font-bold text-center">
|
|
{formatDate(datetime)}
|
|
</div>
|
|
<div>{missionId} </div>
|
|
<div className="text-[18px] font-bold text-center">{language}</div>
|
|
<div
|
|
className={cn(
|
|
'text-[18px] font-bold text-center',
|
|
status == 'wronganswer' && 'text-liquid-red',
|
|
status == 'timelimit' && 'text-liquid-orange',
|
|
status == 'success' && 'text-liquid-green',
|
|
)}
|
|
>
|
|
{verdict}
|
|
</div>
|
|
<div>{formatMilliseconds(duration)}</div>
|
|
<div>
|
|
{formatBytesToMB(memory)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubmissionItem;
|