missions and filter

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

@@ -0,0 +1,109 @@
+import { FC, useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
+import { cn } from '../../../../lib/cn';
+import MissionsBlock from './MissionsBlock';
+import {
+    fetchMyMissions,
+    setMissionsStatus,
+} from '../../../../redux/slices/missions';
+
+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 Missions = () => {
+    const dispatch = useAppDispatch();
+    const missions = useAppSelector((state) => state.missions.missions);
+    const status = useAppSelector((state) => state.missions.statuses.fetchMy);
+
+    useEffect(() => {
+        dispatch(setMenuActiveProfilePage('missions'));
+        dispatch(fetchMyMissions());
+    }, []);
+
+    useEffect(() => {
+        dispatch(setMissionsStatus({ key: 'fetchMy', status: 'idle' }));
+    }, [status]);
+
+    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 className="p-[20px]">
+                    <MissionsBlock
+                        missions={missions ?? []}
+                        title="Мои миссии"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Missions;