contests

src/views/home/account/missions/MissionsBlock.tsx

@@ -1,19 +1,66 @@
-import { useEffect } from 'react';
-import { useAppDispatch } from '../../../../redux/hooks';
-import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
+import { FC, useEffect } from "react";
+import { useAppDispatch } from "../../../../redux/hooks";
+import { setMenuActiveProfilePage } from "../../../../redux/slices/store";
+import { cn } from "../../../../lib/cn";
+
+
+interface ItemProps {
+    count: number;
+    totalCount: number;
+    title: string;
+    color?: "default" | "red" | "green" | "orange";
+}
+
+const Item: FC<ItemProps> = ({count, totalCount, title, color = "default"}) => {
+
+    return <div className={cn("flex flex-row rounded-full bg-liquid-lighter px-[16px] py-[8px] gap-[10px] text-[14px]",
+        color == "default" && "text-liquid-light",
+        color == "red" && "text-liquid-red",
+        color == "green" && "text-liquid-green",
+        color == "orange" && "text-liquid-orange",
+    )}>
+        <div>{count}/{totalCount}</div>
+        <div>{title}</div>
+    </div>
+};
 
 const MissionsBlock = () => {
-    const dispatch = useAppDispatch();
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(setMenuActiveProfilePage('missions'));
-    }, []);
+  useEffect(() => {
+    dispatch(setMenuActiveProfilePage("missions"));
+  }, []);
 
-    return (
-        <div className="h-full w-full relative      flex items-center justify-center text-[60px] font-bold">
-            Пока пусто :(
+  return (
+    <div className="h-full w-full relative overflow-y-scroll medium-scrollbar">
+      <div className="w-full flex flex-col">
+        <div className="p-[20px] flex flex-col gap-[20px]">
+          <div className="text-[24px] font-bold text-liquid-white">Решенные задачи</div>
+          <div className="flex flex-row justify-between items-start">
+
+          <div className="flex gap-[10px]"> 
+            <Item count={14} totalCount={123} title="Задачи"/>
+          </div>
+          <div className="flex gap-[20px]"> 
+            <Item count={14} totalCount={123} title="Easy" color="green"/>
+            <Item count={14} totalCount={123} title="Medium" color="orange"/>
+            <Item count={14} totalCount={123} title="Hard" color="red"/>
+          </div>
+
+          </div>
+          <div className="text-[24px] font-bold text-liquid-white">Компетенции</div>
+          
+          <div className="flex flex-wrap gap-[10px]"> 
+            <Item count={14} totalCount={123} title="Массивы"/>
+            <Item count={14} totalCount={123} title="Списки"/>
+            <Item count={14} totalCount={123} title="Стэк"/>
+          </div>
         </div>
-    );
+        <div>Недавиние задачи</div>
+        <div>Мои задачи</div>
+      </div>
+    </div>
+  );
 };
 
 export default MissionsBlock;