Add account and articles updater

src/views/home/account/RightPanel.tsx

@@ -1,15 +1,108 @@
+import { PrimaryButton } from '../../../components/button/PrimaryButton';
 import { ReverseButton } from '../../../components/button/ReverseButton';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { logout } from '../../../redux/slices/auth';
+import { OpenBook, Clipboard, Cup } from '../../../assets/icons/account';
+import { FC } from 'react';
+
+interface StatisticItemProps {
+    icon: string;
+    title: string;
+    count?: number;
+    countLastWeek?: number;
+}
+const StatisticItem: FC<StatisticItemProps> = ({
+    title,
+    icon,
+    count = 0,
+    countLastWeek = 0,
+}) => {
+    return (
+        <div className="h-[53px] grid grid-cols-[36px,1fr] gap-[20px] text-liquid-white">
+            <img src={icon} />
+            <div className="h-full flex flex-col justify-between">
+                <div className="flex gap-[20px] text-[18px] font-bold leading-[23px]">
+                    <div>{title}</div>
+                    <div>{count}</div>
+                </div>
+                <div className="text-[16px] font-medium leading-[20px]">
+                    {'За  7 дней '}
+                    <span className="text-liquid-light">{countLastWeek}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
 
 const RightPanel = () => {
     const dispatch = useAppDispatch();
     const name = useAppSelector((state) => state.auth.username);
     const email = useAppSelector((state) => state.auth.email);
     return (
-        <div className="h-full w-full relative p-[20px]">
-            <div>{name}</div>
-            <div>{email}</div>
+        <div className="h-full w-full relative flex flex-col p-[20px] pt-[35px] gap-[20px]">
+            <div className="grid grid-cols-[150px,1fr] h-[150px] gap-[20px]">
+                <div className="-hfull w-full bg-[#B8B8B8] rounded-[10px]"></div>
+                <div className=" relative">
+                    <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
+                        {name}
+                    </div>
+                    <div className="text-liquid-light text-[18px] leading-[23px] font-medium">
+                        {email}
+                    </div>
+                    <div className=" absolute bottom-0 text-liquid-light text-[24px] leading-[30px] font-bold">
+                        Топ 50%
+                    </div>
+                </div>
+            </div>
+
+            <PrimaryButton
+                onClick={() => {}}
+                text="Редактировать"
+                className="w-full"
+            />
+
+            <div className="h-[1px] w-full bg-liquid-lighter"></div>
+
+            <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
+                {'Статистика решений'}
+            </div>
+
+            <StatisticItem
+                icon={Clipboard}
+                title={'Задачи'}
+                count={14}
+                countLastWeek={5}
+            />
+            <StatisticItem
+                icon={Cup}
+                title={'Контесты'}
+                count={8}
+                countLastWeek={2}
+            />
+
+            <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
+                {'Статистика созданий'}
+            </div>
+
+            <StatisticItem
+                icon={Clipboard}
+                title={'Задачи'}
+                count={4}
+                countLastWeek={2}
+            />
+            <StatisticItem
+                icon={OpenBook}
+                title={'Статьи'}
+                count={12}
+                countLastWeek={4}
+            />
+            <StatisticItem
+                icon={Cup}
+                title={'Контесты'}
+                count={2}
+                countLastWeek={0}
+            />
+
             <ReverseButton
                 className="absolute bottom-[20px] right-[20px]"
                 onClick={() => {