106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import { cn } from '../../../../lib/cn';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Edit } from '../../../../assets/icons/input';
|
||
import { useAppSelector } from '../../../../redux/hooks';
|
||
|
||
export interface MissionItemProps {
|
||
id: number;
|
||
authorId?: number;
|
||
name: string;
|
||
difficulty: number;
|
||
tags?: string[];
|
||
timeLimit?: number;
|
||
memoryLimit?: number;
|
||
createdAt?: string;
|
||
updatedAt?: string;
|
||
type?: 'first' | 'second';
|
||
status?: 'empty' | 'success' | 'error';
|
||
setTastDeleteId: (v: number) => void;
|
||
setDeleteModalActive: (v: boolean) => void;
|
||
}
|
||
|
||
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 = 1000,
|
||
memoryLimit = 256 * 1024 * 1024,
|
||
type,
|
||
status,
|
||
setTastDeleteId,
|
||
setDeleteModalActive,
|
||
}) => {
|
||
const navigate = useNavigate();
|
||
const difficultyItems = ['Easy', 'Medium', 'Hard'];
|
||
const difficultyString =
|
||
difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
|
||
const deleteStatus = useAppSelector(
|
||
(state) => state.missions.statuses.delete,
|
||
);
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'min-h-[44px] w-full relative rounded-[10px] text-liquid-white py-[8px]',
|
||
type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
|
||
'grid grid-cols-[80px,2fr,3fr,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}?back=/home/account/missions`);
|
||
}}
|
||
>
|
||
<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]',
|
||
difficultyString == 'Hard' && 'text-liquid-red',
|
||
difficultyString == 'Medium' && 'text-liquid-orange',
|
||
difficultyString == 'Easy' && 'text-liquid-green',
|
||
)}
|
||
>
|
||
{difficultyString}
|
||
</div>
|
||
<div className="h-[24px] w-[24px]">
|
||
<img
|
||
src={Edit}
|
||
className={cn(
|
||
'hover:bg-liquid-light rounded-[8px] transition-all duration-300',
|
||
deleteStatus == 'loading' &&
|
||
'cursor-default pointer-events-none hover:bg-transparent opacity-35',
|
||
)}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
if (deleteStatus != 'loading') {
|
||
setTastDeleteId(id);
|
||
setDeleteModalActive(true);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MissionItem;
|