upload mission

src/views/home/missions/MissionItem.tsx

@@ -0,0 +1,69 @@
+import { cn } from "../../../lib/cn";
+import { IconError, IconSuccess } from "../../../assets/icons/missions";
+
+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
+}) => {
+    console.log(id);
+    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]",
+        )}>
+            <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;