missions and filter

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

@@ -1,66 +1,71 @@
-import { FC, useEffect } from "react";
-import { useAppDispatch } from "../../../../redux/hooks";
-import { setMenuActiveProfilePage } from "../../../../redux/slices/store";
-import { cn } from "../../../../lib/cn";
+import { useState, FC } from 'react';
+import { cn } from '../../../../lib/cn';
+import { ChevroneDown } from '../../../../assets/icons/groups';
+import MyMissionItem from './MyMissionItem';
+import { Mission } from '../../../../redux/slices/missions';
 
-
-interface ItemProps {
-    count: number;
-    totalCount: number;
+interface MissionsBlockProps {
+    missions: Mission[];
     title: string;
-    color?: "default" | "red" | "green" | "orange";
+    className?: string;
 }
 
-const Item: FC<ItemProps> = ({count, totalCount, title, color = "default"}) => {
+const MissionsBlock: FC<MissionsBlockProps> = ({
+    missions,
+    title,
+    className,
+}) => {
+    const [active, setActive] = useState<boolean>(true);
 
-    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();
-
-  useEffect(() => {
-    dispatch(setMenuActiveProfilePage("missions"));
-  }, []);
-
-  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>
+    return (
+        <div
+            className={cn(
+                ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
+                className,
+            )}
+        >
+            <div
+                className={cn(
+                    ' h-[40px] text-[24px] font-bold flex gap-[10px] items-center cursor-pointer border-b-[1px] border-b-transparent transition-all duration-300',
+                    active && 'border-b-liquid-lighter',
+                )}
+                onClick={() => {
+                    setActive(!active);
+                }}
+            >
+                <span>{title}</span>
+                <img
+                    src={ChevroneDown}
+                    className={cn(
+                        'transition-all duration-300',
+                        active && 'rotate-180',
+                    )}
+                />
+            </div>
+            <div
+                className={cn(
+                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
+                    active && 'grid-rows-[1fr] opacity-100',
+                )}
+            >
+                <div className="overflow-hidden">
+                    <div className="pb-[10px] pt-[20px]">
+                        {missions.map((v, i) => (
+                            <MyMissionItem
+                                key={i}
+                                id={v.id}
+                                name={v.name}
+                                timeLimit={v.timeLimit}
+                                memoryLimit={v.memoryLimit}
+                                difficulty={v.difficulty}
+                                type={i % 2 ? 'second' : 'first'}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
-        <div>Недавиние задачи</div>
-        <div>Мои задачи</div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default MissionsBlock;