statement

src/views/home/missions/MissionItem.tsx

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/cn";
 import { IconError, IconSuccess } from "../../../assets/icons/missions";
+import { useNavigate } from "react-router-dom";
 
 export interface MissionItemProps {
     id: number;
@@ -29,14 +30,18 @@ export function formatBytesToMB(bytes: number): string {
 const MissionItem: React.FC<MissionItemProps> = ({
     id, name, difficulty, timeLimit, memoryLimit, type, status
 }) => {
-    console.log(id);
+    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>