missions and filter

2025-11-08 06:58:56 +03:00
parent 69655dda82
commit b12a3acf1d
26 changed files with 694 additions and 158 deletions
--- a/src/views/home/account/missions/MyMissionItem.tsx
+++ b/src/views/home/account/missions/MyMissionItem.tsx
@@ -0,0 +1,90 @@
+import { cn } from '../../../../lib/cn';
+import { IconError, IconSuccess } from '../../../../assets/icons/missions';
+import { useNavigate } from 'react-router-dom';
+import { Edit } from '../../../../assets/icons/input';
+
+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';
+}
+
+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,
+}) => {
+    const navigate = useNavigate();
+    const difficultyItems = ['Easy', 'Medium', 'Hard'];
+    const difficultyString =
+        difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
+
+    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="hover:bg-liquid-light rounded-[8px] transition-all duration-300"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default MissionItem;