account and protected router

src/views/home/account/Account.tsx

@@ -0,0 +1,42 @@
+import { Route, Routes } from 'react-router-dom';
+import AccountMenu from './AccoutMenu';
+import RightPanel from './RightPanel';
+import MissionsBlock from './MissionsBlock';
+import ContestsBlock from './ContestsBlock';
+import ArticlesBlock from './ArticlesBlock';
+
+const Account = () => {
+    return (
+        <div className="h-full w-[calc(100%+250px)] box-border grid grid-cols-[1fr,520px] relative">
+            <div className=" h-full min-h-0  flex flex-col">
+                <div className=" h-full grid grid-rows-[80px,1fr]   ">
+                    <div className="">
+                        <AccountMenu />
+                    </div>
+                    <div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px] ">
+                        <Routes>
+                            <Route
+                                path="/home/account/missions"
+                                element={<MissionsBlock />}
+                            />
+                            <Route
+                                path="/home/account/articles"
+                                element={<ArticlesBlock />}
+                            />
+                            <Route
+                                path="/home/account/contests"
+                                element={<ContestsBlock />}
+                            />
+                            <Route path="*" element={<MissionsBlock />} />
+                        </Routes>
+                    </div>
+                </div>
+            </div>
+            <div className=" h-full min-h-0">
+                <RightPanel />
+            </div>
+        </div>
+    );
+};
+
+export default Account;

src/views/home/account/AccoutMenu.tsx

@@ -0,0 +1,5 @@
+const AccountMenu = () => {
+    return <div className="h-full w-full relative "></div>;
+};
+
+export default AccountMenu;

src/views/home/account/ArticlesBlock.tsx

@@ -0,0 +1,5 @@
+const ArticlesBlock = () => {
+    return <div className="h-full w-full relative "></div>;
+};
+
+export default ArticlesBlock;

src/views/home/account/ContestsBlock.tsx

@@ -0,0 +1,5 @@
+const ContestsBlock = () => {
+    return <div className="h-full w-full relative bg-fuchsia-600"></div>;
+};
+
+export default ContestsBlock;

src/views/home/account/MissionsBlock.tsx

@@ -0,0 +1,5 @@
+const MissionsBlock = () => {
+    return <div className="h-full w-full relative "></div>;
+};
+
+export default MissionsBlock;

src/views/home/account/RightPanel.tsx

@@ -0,0 +1,25 @@
+import { ReverseButton } from '../../../components/button/ReverseButton';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { logout } from '../../../redux/slices/auth';
+
+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>
+            <ReverseButton
+                className="absolute bottom-[20px] right-[20px]"
+                onClick={() => {
+                    dispatch(logout());
+                }}
+                text="Выход"
+                color="error"
+            />
+        </div>
+    );
+};
+
+export default RightPanel;