119 lines
3.9 KiB
TypeScript
119 lines
3.9 KiB
TypeScript
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 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={() => {
|
||
dispatch(logout());
|
||
}}
|
||
text="Выход"
|
||
color="error"
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RightPanel;
|