fix: competition page

2026-05-23 20:17:10 +00:00 · 2025-03-01 13:39:47 +03:00
parent 65f73fb4a0
commit 4202ad5776
12 changed files with 72 additions and 125 deletions
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { Task, TaskStatus } from "@/shared/types";
+
+const sampleTasks: Task[] = [
+  { id: "1", number: "1.1", status: "uncleared" },
+  { id: "2", number: "1.2", status: "checking" },
+  { id: "3", number: "1.3", status: "correct" },
+  { id: "4", number: "2.1", status: "partial" },
+  { id: "5", number: "2.2", status: "wrong" },
+  { id: "6", number: "2.3", status: "uncleared" },
+  { id: "7", number: "3.1", status: "checking" },
+  { id: "8", number: "3.2", status: "correct" },
+];
+
+const CompetitionRunnerPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const [competitionTitle, setCompetitionTitle] = useState(
+    "Олимпиада DANO 2025. Индивидуальный этап",
+  );
+  const [tasks, setTasks] = useState<Task[]>(sampleTasks);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+
+  const getTaskBgColor = (status: TaskStatus): string => {
+    switch (status) {
+      case "uncleared":
+        return "bg-[var(--color-task-uncleared)]";
+      case "checking":
+        return "bg-[var(--color-task-checking)]";
+      case "correct":
+        return "bg-[var(--color-task-correct)]";
+      case "partial":
+        return "bg-[var(--color-task-partial)]";
+      case "wrong":
+        return "bg-[var(--color-task-wrong)]";
+    }
+  };
+
+  const getTaskTextColor = (status: TaskStatus): string => {
+    switch (status) {
+      case "uncleared":
+        return "text-gray-600";
+      case "checking":
+        return "text-gray-800";
+      case "correct":
+        return "text-green-800";
+      case "partial":
+        return "text-green-700";
+      case "wrong":
+        return "text-red-800";
+    }
+  };
+
+  const handleTaskClick = (taskId: string) => {
+    setSelectedTaskId(taskId);
+  };
+
+  return (
+    <>
+      <div className="sticky top-16 z-10 border-b border-gray-200 bg-white shadow-sm">
+        <div className="container mx-auto px-4">
+          <div className="py-4">
+            <h1 className="font-hse-sans text-xl font-semibold">
+              {competitionTitle}
+            </h1>
+          </div>
+
+          <div className="scrollbar-thin scrollbar-thumb-gray-300 flex items-center gap-3 overflow-x-auto pb-4">
+            {tasks.map((task) => (
+              <div
+                key={task.id}
+                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} font-hse-sans flex-shrink-0 cursor-pointer rounded-lg px-4 py-2 text-sm font-medium transition-transform hover:scale-105 ${selectedTaskId === task.id ? "ring-2 ring-black" : ""}`}
+                onClick={() => handleTaskClick(task.id)}
+              >
+                {task.number}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="rounded-lg bg-white p-6 shadow-sm">
+          {selectedTaskId ? (
+            <div className="font-hse-sans">
+              <h2 className="mb-4 text-lg font-medium">
+                Задание {tasks.find((t) => t.id === selectedTaskId)?.number}
+              </h2>
+              <p className="text-gray-700">
+                Содержание задания будет отображаться здесь.
+              </p>
+            </div>
+          ) : (
+            <p className="font-hse-sans text-gray-500">
+              Выберите задание для просмотра
+            </p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CompetitionRunnerPage;