add problems

2025-10-28 23:15:29 +03:00
parent edd4426780
commit 71985fa04f
9 changed files with 625 additions and 13 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,13 +11,16 @@ import ProblemStatement from "./views/problem/statement/Proble";

 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-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={<ProblemStatement/>}/>
-      </Routes>
+    <div className="w-full h-full bg-liquid-background flex justify-center">
+      <div className="relative w-full max-w-[1600px] 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-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={<ProblemStatement />} />
+        </Routes>
+
+      </div>

      {/* <Switch
        className=" fixed top-0 left-0 z-full"
--- a/src/assets/icons/problems/icon-error.svg
+++ b/src/assets/icons/problems/icon-error.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7101 8.28999C15.6171 8.19626 15.5065 8.12187 15.3847 8.0711C15.2628 8.02033 15.1321 7.99419 15.0001 7.99419C14.8681 7.99419 14.7374 8.02033 14.6155 8.0711C14.4936 8.12187 14.383 8.19626 14.2901 8.28999L12.0001 10.59L9.71008 8.28999C9.52178 8.10168 9.26638 7.9959 9.00008 7.9959C8.73378 7.9959 8.47838 8.10168 8.29008 8.28999C8.10178 8.47829 7.99599 8.73369 7.99599 8.99999C7.99599 9.26629 8.10178 9.52168 8.29008 9.70999L10.5901 12L8.29008 14.29C8.19635 14.383 8.12196 14.4936 8.07119 14.6154C8.02042 14.7373 7.99428 14.868 7.99428 15C7.99428 15.132 8.02042 15.2627 8.07119 15.3846C8.12196 15.5064 8.19635 15.617 8.29008 15.71C8.38304 15.8037 8.49364 15.8781 8.6155 15.9289C8.73736 15.9796 8.86807 16.0058 9.00008 16.0058C9.13209 16.0058 9.2628 15.9796 9.38466 15.9289C9.50652 15.8781 9.61712 15.8037 9.71008 15.71L12.0001 13.41L14.2901 15.71C14.383 15.8037 14.4936 15.8781 14.6155 15.9289C14.7374 15.9796 14.8681 16.0058 15.0001 16.0058C15.1321 16.0058 15.2628 15.9796 15.3847 15.9289C15.5065 15.8781 15.6171 15.8037 15.7101 15.71C15.8038 15.617 15.8782 15.5064 15.929 15.3846C15.9797 15.2627 16.0059 15.132 16.0059 15C16.0059 14.868 15.9797 14.7373 15.929 14.6154C15.8782 14.4936 15.8038 14.383 15.7101 14.29L13.4101 12L15.7101 9.70999C15.8038 9.61702 15.8782 9.50642 15.929 9.38456C15.9797 9.26271 16.0059 9.132 16.0059 8.99999C16.0059 8.86798 15.9797 8.73727 15.929 8.61541C15.8782 8.49355 15.8038 8.38295 15.7101 8.28999ZM19.0701 4.92999C18.1476 3.97489 17.0442 3.21306 15.8241 2.68897C14.6041 2.16488 13.2919 1.88902 11.9641 1.87748C10.6363 1.86595 9.3195 2.11896 8.09054 2.62177C6.86158 3.12458 5.74506 3.86711 4.80613 4.80604C3.8672 5.74497 3.12467 6.86148 2.62186 8.09045C2.11905 9.31941 1.86604 10.6362 1.87757 11.964C1.88911 13.2918 2.16498 14.604 2.68907 15.824C3.21316 17.0441 3.97498 18.1475 4.93008 19.07C5.85255 20.0251 6.95599 20.7869 8.17603 21.311C9.39607 21.8351 10.7083 22.111 12.0361 22.1225C13.3639 22.134 14.6807 21.881 15.9096 21.3782C17.1386 20.8754 18.2551 20.1329 19.194 19.1939C20.133 18.255 20.8755 17.1385 21.3783 15.9095C21.8811 14.6806 22.1341 13.3638 22.1226 12.036C22.111 10.7082 21.8352 9.39598 21.3111 8.17594C20.787 6.9559 20.0252 5.85246 19.0701 4.92999ZM17.6601 17.66C16.3521 18.9694 14.6306 19.7848 12.7889 19.9673C10.9471 20.1498 9.09908 19.688 7.5596 18.6608C6.02012 17.6335 4.88444 16.1042 4.34605 14.3335C3.80767 12.5627 3.89988 10.6601 4.60699 8.94977C5.3141 7.23941 6.59235 5.82714 8.22397 4.95355C9.85559 4.07996 11.7396 3.79912 13.5551 4.15886C15.3706 4.5186 17.0051 5.49668 18.1803 6.92645C19.3555 8.35622 19.9986 10.1492 20.0001 12C20.0036 13.0513 19.7987 14.0928 19.397 15.0644C18.9953 16.0359 18.405 16.9181 17.6601 17.66Z" fill="#F13E5F"/>
+</svg>
--- a/src/assets/icons/problems/icon-success.svg
+++ b/src/assets/icons/problems/icon-success.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#10BE59"/>
+</svg>
--- a/src/assets/icons/problems/index.ts
+++ b/src/assets/icons/problems/index.ts
@@ -0,0 +1,4 @@
+import IconSuccess from "./icon-success.svg"
+import IconError from "./icon-error.svg"
+
+export {IconError, IconSuccess}
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -6,6 +6,7 @@ import Menu from "../views/home/menu/Menu";
 import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { useEffect } from "react";
 import { fetchWhoAmI } from "../redux/slices/auth";
+import Problems from "../views/home/problems/Problems";

 const Home = () => {
  const name = useAppSelector((state) => state.auth.username);
@@ -18,15 +19,16 @@ const Home = () => {


  return (
-    <div className="h-full w-full bg-liquid-background grid grid-cols-[250px,1fr] divide-x-[1px] divide-liquid-lighter">
-      <div className="">
+    <div className="h-screen w-full bg-liquid-background grid grid-cols-[250px,1fr] divide-x-[1px] divide-liquid-lighter">
+      <div className="h-screen">
        <Menu />
      </div>
-      <div className="">
+      <div className="h-screen">
        <Routes>
          <Route path="login" element={<Login />} />
          <Route path="account" element={<Login />} />
          <Route path="register" element={<Register />} />
+          <Route path="problems/*" element={<Problems/>} />
          <Route path="*" element={name} />
        </Routes>

--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,6 +7,7 @@
  /* outline: 1px solid green; */
 } 

+
 :root {
  color-scheme: light dark;
  width: 100%;
@@ -19,6 +20,7 @@
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
  font-weight: 400;
  line-height: 1.5;
+  background-color: var(--color-liquid-background);
  color: rgba(255, 255, 255, 0.87);
 }

@@ -73,3 +75,23 @@ body {
  cursor: pointer;
 }

+
+
+
+html {
+    scrollbar-gutter: stable;
+    padding-left: 8px;
+}
+html::-webkit-scrollbar {
+  width: 8px;              /* ширина вертикального */
+}
+/* Трек (фон) */
+html::-webkit-scrollbar-track {
+  background: transparent;
+}
+/* Ползунок (thumb) */
+html::-webkit-scrollbar-thumb {
+  background-color: var(--color-liquid-lighter);
+  border-radius: 1000px;
+  cursor: pointer;
+}
--- a/src/views/home/menu/Menu.tsx
+++ b/src/views/home/menu/Menu.tsx
@@ -6,7 +6,7 @@ import { useAppSelector } from "../../../redux/hooks";
 const Menu = () => {
  const menuItems = [
    {text: "Главная", href: "/home", icon: Home, page: "home" },
-    {text: "Задачи", href: "/home", icon: Clipboard, page: "clipboard" },
+    {text: "Задачи", href: "/home/problems", icon: Clipboard, page: "clipboard" },
    {text: "Статьи", href: "/home", icon: Openbook, page: "openbool" },
    {text: "Группы", href: "/home", icon: Users, page: "users" },
    {text: "Контесты", href: "/home", icon: Cup, page: "cup" },
@@ -15,8 +15,8 @@ const Menu = () => {
  const activePage = useAppSelector((state) => state.store.menu.activePage);

  return (
-    <div className="h-full w-full  items-center box-border p-[20px] pt-[35px]">
-      <img src={Logo} className="w-full" />
+    <div className="w-[250px] fixed top-0 items-center box-border p-[20px] pt-[35px]">
+      <img src={Logo} className="w-[173px]" />
      <div className="">
        {menuItems.map((v, i) => (
          <MenuItem key={i} icon={v.icon} text={v.text} href={v.href} active={v.page == activePage} page={v.page}/>
--- a/src/views/home/problems/ProblemItem.tsx
+++ b/src/views/home/problems/ProblemItem.tsx
@@ -0,0 +1,72 @@
+import { Logo } from "../../../assets/logos";
+import { Account, Clipboard, Cup, Home, Openbook, Users } from "../../../assets/icons/menu";
+// import MenuItem from "./MenuItem";
+import { cn } from "../../../lib/cn";
+import { IconError, IconSuccess } from "../../../assets/icons/problems";
+
+export interface ProblemItemProps {
+    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 ProblemItem: React.FC<ProblemItemProps> = ({
+    id, authorId, name, difficulty, tags, timeLimit, memoryLimit, createdAt, updatedAt, 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 ProblemItem;
--- a/src/views/home/problems/Problems.tsx
+++ b/src/views/home/problems/Problems.tsx
@@ -0,0 +1,503 @@
+import { Logo } from "../../../assets/logos";
+import { Account, Clipboard, Cup, Home, Openbook, Users } from "../../../assets/icons/menu";
+// import MenuItem from "./MenuItem";
+import { useAppSelector } from "../../../redux/hooks";
+import ProblemItem from "./ProblemItem";
+import { SecondaryButton } from "../../../components/button/SecondaryButton";
+
+
+export interface Problem {
+    id: number;
+    authorId: number;
+    name: string;
+    difficulty: "Easy" | "Medium" | "Hard";
+    tags: string[];
+    timeLimit: number;
+    memoryLimit: number;
+    createdAt: string;
+    updatedAt: string;
+}
+
+
+const Problems = () => {
+
+    const problems: Problem[] = [
+        {
+            "id": 1,
+            "authorId": 1,
+            "name": "Todo List App",
+            "difficulty": "Easy",
+            "tags": ["react", "state", "list"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:13.000Z",
+            "updatedAt": "2025-10-28T13:23:13.000Z"
+        },
+        {
+            "id": 2,
+            "authorId": 1,
+            "name": "Search Filter Component",
+            "difficulty": "Medium",
+            "tags": ["filter", "props", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:14.000Z",
+            "updatedAt": "2025-10-28T13:23:14.000Z"
+        },
+        {
+            "id": 3,
+            "authorId": 1,
+            "name": "User Card List",
+            "difficulty": "Easy",
+            "tags": ["components", "props", "array"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:15.000Z",
+            "updatedAt": "2025-10-28T13:23:15.000Z"
+        },
+        {
+            "id": 4,
+            "authorId": 1,
+            "name": "Theme Switcher",
+            "difficulty": "Medium",
+            "tags": ["context", "theme", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:16.000Z",
+            "updatedAt": "2025-10-28T13:23:16.000Z"
+        },
+        {
+            "id": 5,
+            "authorId": 1,
+            "name": "Debounced Input",
+            "difficulty": "Hard",
+            "tags": ["debounce", "hooks", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:17.000Z",
+            "updatedAt": "2025-10-28T13:23:17.000Z"
+        },
+        {
+            "id": 6,
+            "authorId": 1,
+            "name": "Pagination Component",
+            "difficulty": "Medium",
+            "tags": ["pagination", "array", "state"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:18.000Z",
+            "updatedAt": "2025-10-28T13:23:18.000Z"
+        },
+        {
+            "id": 7,
+            "authorId": 1,
+            "name": "Modal Window",
+            "difficulty": "Easy",
+            "tags": ["ui", "portal", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:19.000Z",
+            "updatedAt": "2025-10-28T13:23:19.000Z"
+        },
+        {
+            "id": 8,
+            "authorId": 1,
+            "name": "Form Validation",
+            "difficulty": "Hard",
+            "tags": ["form", "validation", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:20.000Z",
+            "updatedAt": "2025-10-28T13:23:20.000Z"
+        },
+        {
+            "id": 9,
+            "authorId": 1,
+            "name": "Countdown Timer",
+            "difficulty": "Medium",
+            "tags": ["timer", "hooks", "state"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:21.000Z",
+            "updatedAt": "2025-10-28T13:23:21.000Z"
+        },
+        {
+            "id": 10,
+            "authorId": 1,
+            "name": "Drag And Drop List",
+            "difficulty": "Hard",
+            "tags": ["dragdrop", "array", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:22.000Z",
+            "updatedAt": "2025-10-28T13:23:22.000Z"
+        },
+        {
+            "id": 11,
+            "authorId": 1,
+            "name": "Custom Hook Use Fetch",
+            "difficulty": "Medium",
+            "tags": ["hook", "fetch", "async"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:23.000Z",
+            "updatedAt": "2025-10-28T13:23:23.000Z"
+        },
+        {
+            "id": 12,
+            "authorId": 1,
+            "name": "Infinite Scroll",
+            "difficulty": "Hard",
+            "tags": ["scroll", "pagination", "api"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:24.000Z",
+            "updatedAt": "2025-10-28T13:23:24.000Z"
+        },
+        {
+            "id": 13,
+            "authorId": 1,
+            "name": "Responsive Navbar",
+            "difficulty": "Easy",
+            "tags": ["css", "layout", "responsive"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:25.000Z",
+            "updatedAt": "2025-10-28T13:23:25.000Z"
+        },
+        {
+            "id": 14,
+            "authorId": 1,
+            "name": "Accordion Component",
+            "difficulty": "Easy",
+            "tags": ["ui", "state", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:26.000Z",
+            "updatedAt": "2025-10-28T13:23:26.000Z"
+        },
+        {
+            "id": 15,
+            "authorId": 1,
+            "name": "File Upload Preview",
+            "difficulty": "Hard",
+            "tags": ["file", "events", "preview"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:27.000Z",
+            "updatedAt": "2025-10-28T13:23:27.000Z"
+        },
+        {
+            "id": 16,
+            "authorId": 1,
+            "name": "Dark Mode Toggle",
+            "difficulty": "Easy",
+            "tags": ["theme", "context", "localStorage"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:28.000Z",
+            "updatedAt": "2025-10-28T13:23:28.000Z"
+        },
+        {
+            "id": 17,
+            "authorId": 1,
+            "name": "Realtime Clock",
+            "difficulty": "Easy",
+            "tags": ["date", "state", "interval"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:29.000Z",
+            "updatedAt": "2025-10-28T13:23:29.000Z"
+        },
+        {
+            "id": 18,
+            "authorId": 1,
+            "name": "Chart With Recharts",
+            "difficulty": "Medium",
+            "tags": ["chart", "data", "props"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:30.000Z",
+            "updatedAt": "2025-10-28T13:23:30.000Z"
+        },
+        {
+            "id": 19,
+            "authorId": 1,
+            "name": "Router Navigation",
+            "difficulty": "Medium",
+            "tags": ["router", "navigation", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:31.000Z",
+            "updatedAt": "2025-10-28T13:23:31.000Z"
+        },
+        {
+            "id": 20,
+            "authorId": 1,
+            "name": "Data Table Sortable",
+            "difficulty": "Hard",
+            "tags": ["table", "sort", "filter"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:32.000Z",
+            "updatedAt": "2025-10-28T13:23:32.000Z"
+        },
+        {
+            "id": 1,
+            "authorId": 1,
+            "name": "Todo List App",
+            "difficulty": "Easy",
+            "tags": ["react", "state", "list"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:13.000Z",
+            "updatedAt": "2025-10-28T13:23:13.000Z"
+        },
+        {
+            "id": 2,
+            "authorId": 1,
+            "name": "Search Filter Component",
+            "difficulty": "Medium",
+            "tags": ["filter", "props", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:14.000Z",
+            "updatedAt": "2025-10-28T13:23:14.000Z"
+        },
+        {
+            "id": 3,
+            "authorId": 1,
+            "name": "User Card List",
+            "difficulty": "Easy",
+            "tags": ["components", "props", "array"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:15.000Z",
+            "updatedAt": "2025-10-28T13:23:15.000Z"
+        },
+        {
+            "id": 4,
+            "authorId": 1,
+            "name": "Theme Switcher",
+            "difficulty": "Medium",
+            "tags": ["context", "theme", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:16.000Z",
+            "updatedAt": "2025-10-28T13:23:16.000Z"
+        },
+        {
+            "id": 5,
+            "authorId": 1,
+            "name": "Debounced Input",
+            "difficulty": "Hard",
+            "tags": ["debounce", "hooks", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:17.000Z",
+            "updatedAt": "2025-10-28T13:23:17.000Z"
+        },
+        {
+            "id": 6,
+            "authorId": 1,
+            "name": "Pagination Component",
+            "difficulty": "Medium",
+            "tags": ["pagination", "array", "state"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:18.000Z",
+            "updatedAt": "2025-10-28T13:23:18.000Z"
+        },
+        {
+            "id": 7,
+            "authorId": 1,
+            "name": "Modal Window",
+            "difficulty": "Easy",
+            "tags": ["ui", "portal", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:19.000Z",
+            "updatedAt": "2025-10-28T13:23:19.000Z"
+        },
+        {
+            "id": 8,
+            "authorId": 1,
+            "name": "Form Validation",
+            "difficulty": "Hard",
+            "tags": ["form", "validation", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:20.000Z",
+            "updatedAt": "2025-10-28T13:23:20.000Z"
+        },
+        {
+            "id": 9,
+            "authorId": 1,
+            "name": "Countdown Timer",
+            "difficulty": "Medium",
+            "tags": ["timer", "hooks", "state"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:21.000Z",
+            "updatedAt": "2025-10-28T13:23:21.000Z"
+        },
+        {
+            "id": 10,
+            "authorId": 1,
+            "name": "Drag And Drop List",
+            "difficulty": "Hard",
+            "tags": ["dragdrop", "array", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:22.000Z",
+            "updatedAt": "2025-10-28T13:23:22.000Z"
+        },
+        {
+            "id": 11,
+            "authorId": 1,
+            "name": "Custom Hook Use Fetch",
+            "difficulty": "Medium",
+            "tags": ["hook", "fetch", "async"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:23.000Z",
+            "updatedAt": "2025-10-28T13:23:23.000Z"
+        },
+        {
+            "id": 12,
+            "authorId": 1,
+            "name": "Infinite Scroll",
+            "difficulty": "Hard",
+            "tags": ["scroll", "pagination", "api"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:24.000Z",
+            "updatedAt": "2025-10-28T13:23:24.000Z"
+        },
+        {
+            "id": 13,
+            "authorId": 1,
+            "name": "Responsive Navbar",
+            "difficulty": "Easy",
+            "tags": ["css", "layout", "responsive"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:25.000Z",
+            "updatedAt": "2025-10-28T13:23:25.000Z"
+        },
+        {
+            "id": 14,
+            "authorId": 1,
+            "name": "Accordion Component",
+            "difficulty": "Easy",
+            "tags": ["ui", "state", "events"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:26.000Z",
+            "updatedAt": "2025-10-28T13:23:26.000Z"
+        },
+        {
+            "id": 15,
+            "authorId": 1,
+            "name": "File Upload Preview",
+            "difficulty": "Hard",
+            "tags": ["file", "events", "preview"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:27.000Z",
+            "updatedAt": "2025-10-28T13:23:27.000Z"
+        },
+        {
+            "id": 16,
+            "authorId": 1,
+            "name": "Dark Mode Toggle",
+            "difficulty": "Easy",
+            "tags": ["theme", "context", "localStorage"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:28.000Z",
+            "updatedAt": "2025-10-28T13:23:28.000Z"
+        },
+        {
+            "id": 17,
+            "authorId": 1,
+            "name": "Realtime Clock",
+            "difficulty": "Easy",
+            "tags": ["date", "state", "interval"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:29.000Z",
+            "updatedAt": "2025-10-28T13:23:29.000Z"
+        },
+        {
+            "id": 18,
+            "authorId": 1,
+            "name": "Chart With Recharts",
+            "difficulty": "Medium",
+            "tags": ["chart", "data", "props"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:30.000Z",
+            "updatedAt": "2025-10-28T13:23:30.000Z"
+        },
+        {
+            "id": 19,
+            "authorId": 1,
+            "name": "Router Navigation",
+            "difficulty": "Medium",
+            "tags": ["router", "navigation", "hooks"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:31.000Z",
+            "updatedAt": "2025-10-28T13:23:31.000Z"
+        },
+        {
+            "id": 20,
+            "authorId": 1,
+            "name": "Data Table Sortable",
+            "difficulty": "Hard",
+            "tags": ["table", "sort", "filter"],
+            "timeLimit": 1000,
+            "memoryLimit": 268435456,
+            "createdAt": "2025-10-28T13:23:32.000Z",
+            "updatedAt": "2025-10-28T13:23:32.000Z"
+        }
+    ];
+
+
+    return (
+        <div className=" h-full w-full box-border p-[20px] pt-[35px]">
+            <div className="h-full box-border mr-[250px]">
+
+                <div className="relative flex items-center mb-[20px]">
+                    <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
+                        База задач
+                    </div>
+                    <SecondaryButton 
+                        onClick={() => {}}
+                        text="Создать задачу"
+                        className="absolute right-0"
+                    />
+                </div>
+
+                <div className="bg-liquid-lighter h-[50px] mb-[20px]">
+
+                </div>
+
+                <div>
+
+                {problems.map((v, i) => (
+                    <ProblemItem key={i} {...v} type={i % 2 == 0 ? "first" : "second"} status={i == 0 || i == 3 || i == 7 ? "success" : (i == 2 || i == 4 || i == 9 ? "error" : "empty")}/>
+                ))}
+                </div>
+
+                
+                <div>
+                    pages
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Problems;