right panel

src/pages/Home.tsx

@@ -15,6 +15,8 @@ import Group from '../views/home/groups/Group';
 import Contest from '../views/home/contest/Contest';
 import Account from '../views/home/account/Account';
 import ProtectedRoute from '../components/router/ProtectedRoute';
+import { MissionsRightPanel } from '../views/home/rightpanel/Missions';
+import { ArticlesRightPanel } from '../views/home/rightpanel/Articles';
 
 const Home = () => {
     const name = useAppSelector((state) => state.auth.username);
@@ -74,7 +76,8 @@ const Home = () => {
             </div>
             {
                 <Routes>
-                    <Route path="articles/*" element={<div></div>} />
+                    <Route path="articles/*" element={<ArticlesRightPanel />} />
+                    <Route path="missions/*" element={<MissionsRightPanel />} />
                 </Routes>
             }
         </div>

src/views/home/rightpanel/Articles.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+
+export const ArticlesRightPanel: FC = () => {
+    const items = [
+        {
+            name: 'Энтузиаст создал карточки с NFC-метками для знакомства ребёнка с музыкой',
+        },
+        {
+            name: 'Алгоритм Древа Силы, Космический Сортировщик',
+        },
+        {
+            name: 'Космический Сортировщик',
+        },
+        {
+            name: 'Зеркала Многомерности',
+        },
+    ];
+    return (
+        <div className="h-screen w-full  overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
+            <div className="text-liquid-white font-bold text-[18px]">
+                Попоулярные статьи
+            </div>
+
+            {items.map((v, i) => {
+                return (
+                    <>
+                        {
+                            <div className="font-bold  text-liquid-light text-[16px]">
+                                {v.name}
+                            </div>
+                        }
+                        {i + 1 != items.length && (
+                            <div className="h-[1px] w-full bg-liquid-lighter"></div>
+                        )}
+                    </>
+                );
+            })}
+        </div>
+    );
+};

src/views/home/rightpanel/Missions.tsx

@@ -0,0 +1,68 @@
+import { FC } from 'react';
+import { cn } from '../../../lib/cn';
+
+export const MissionsRightPanel: FC = () => {
+    const items = [
+        {
+            name: 'Кромсатели металла v4',
+            difficulty: 'Easy',
+            tags: ['strings', 'arrays', 'math'],
+        },
+        {
+            name: 'Алгоритм Древа Силы',
+            difficulty: 'Medium',
+            tags: ['trees', 'dfs', 'recursion'],
+        },
+        {
+            name: 'Космический Сортировщик',
+            difficulty: 'Hard',
+            tags: ['sorting', 'optimization', 'greedy'],
+        },
+        {
+            name: 'Зеркала Многомерности',
+            difficulty: 'Medium',
+            tags: ['matrix', 'geometry', 'simulation'],
+        },
+    ];
+    return (
+        <div className="h-screen w-full  overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
+            <div className="text-liquid-white font-bold text-[18px]">
+                Новые задачи
+            </div>
+
+            {items.map((v, i) => {
+                return (
+                    <>
+                        {
+                            <div className="text-liquid-light text-[16px]">
+                                <div className="font-bold ">{v.name}</div>
+                                <div
+                                    className={cn(
+                                        '',
+                                        v.difficulty == 'Hard' &&
+                                            'text-liquid-red',
+                                        v.difficulty == 'Medium' &&
+                                            'text-liquid-orange',
+                                        v.difficulty == 'Easy' &&
+                                            'text-liquid-green',
+                                    )}
+                                >
+                                    {v.difficulty}
+                                </div>
+                                <div className="flex gap-[10px] overflow-hidden">
+                                    {v.tags.slice(0, 2).map((v, i) => (
+                                        <div key={i}>{v}</div>
+                                    ))}
+                                    {v.tags.length > 2 && '...'}
+                                </div>
+                            </div>
+                        }
+                        {i + 1 != items.length && (
+                            <div className="h-[1px] w-full bg-liquid-lighter"></div>
+                        )}
+                    </>
+                );
+            })}
+        </div>
+    );
+};