statement init

src/App.tsx

@@ -6,13 +6,15 @@ import { Route, Routes } from "react-router-dom";
 // import { Switch } from "./components/switch/Switch";
 import Home from "./pages/Home";
 import CodeEditor from "./views/problem/codeeditor/CodeEditor";
+import Statement from "./views/problem/statement/Statement";
 
 function App() {
   return (
     <div className="flex w-full h-full ">
       <Routes>
         <Route path="/home/*" element={<Home/>}/>
-        <Route path="/editor" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-800"><CodeEditor/></div>}/>
+        <Route path="/editor" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-8001"><CodeEditor/></div>}/>
+        <Route path="/statement" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-8001"><Statement/></div>}/>
         <Route path="*" element={<Home/>}/>
       </Routes>
 

src/styles/index.css

@@ -56,3 +56,20 @@ body {
 }
 
 
+/* Общий контейнер полосы прокрутки */
+.medium-scrollbar::-webkit-scrollbar {
+  width: 8px;              /* ширина вертикального */
+}
+
+/* Трек (фон) */
+.medium-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Ползунок (thumb) */
+.medium-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-liquid-light);
+  border-radius: 1000px;
+  cursor: pointer;
+}
+

src/views/problem/statement/Statement.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { cn } from "../../../lib/cn";
+
+
+const Statement: React.FC = () => {
+
+
+    return (
+        <div className="flex flex-col w-full h-full bg-red-3001 overflow-y-scroll medium-scrollbar pl-[20px] pr-[12px] gap-[20px]">
+            <div>
+                <p className="h-[50px] text-[40px] font-bold text-liquid-white">Грод на 2700</p>
+                <p className="h-[23px] text-[18px] font-bold text-liquid-light">Задача #1234</p>
+            </div>
+
+            <div>
+                tags
+            </div>
+
+            <div>
+                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по времени на тест:</span> 1 секунда</p>
+                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по памяти на тест:</span> 256 мегабайт</p>
+                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ввод:</span> стандартный ввод</p>
+                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">вывод:</span> стандартный вывод</p>
+            </div>
+
+            <div>
+                Три друга хотят встретиться друг с другом. Изначально первый друг находится в позиции x = a, второй друг находится в позиции x = b, а третий находится в позиции x = c на координатной оси Ox.
+За одну минуту каждый из друзей независимо от других друзей может изменить позицию x на 11 влево или на 11 вправо (то есть присвоить x := x − 1 или x := x + 1), или даже не менять ее.
+Введем понятие суммарной попарной дистанции — суммы дистанций между каждой парой друзей. Пусть a′, b′ и c′ — финальные позиции первого, второго и третьего друзей соответственно. Тогда суммарная попарная дистанция
равна |a′ − b′| + |a′ − c′| + |b′ − c′|, где |x| — абсолютная величина (модуль) значения x.
+Друзья интересуются, какой минимальной суммарной попарной дистанции они смогут достичь, если они будут двигаться оптимально. Каждый из друзей сдвинется не более одного раза. Таким образом, более формально, они хотят знать минимальную суммарную попарную дистанцию, которой они могут достичь спустя одну минуту.
+            </div>
+        </div>
+
+    );
+};
+
+export default Statement;