From 18d17f895d891d8b7bb80dfd3572eb3a0f1d84de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D1=82=D0=B0=D0=BB=D0=B8=D0=B9=20=D0=9B=D0=B0?=
 =?UTF-8?q?=D0=B2=D1=88=D0=BE=D0=BD=D0=BE=D0=BA?=
 <114582703+valavshonok@users.noreply.github.com>
Date: Sat, 8 Nov 2025 19:24:53 +0300
Subject: [PATCH] right panel

---
 src/pages/Home.tsx                     |  5 +-
 src/views/home/rightpanel/Articles.tsx | 40 +++++++++++++++
 src/views/home/rightpanel/Missions.tsx | 68 ++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/views/home/rightpanel/Articles.tsx
 create mode 100644 src/views/home/rightpanel/Missions.tsx

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 18e78ff..939635f 100644
--- a/src/pages/Home.tsx
+++ b/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>
diff --git a/src/views/home/rightpanel/Articles.tsx b/src/views/home/rightpanel/Articles.tsx
new file mode 100644
index 0000000..48a9511
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/views/home/rightpanel/Missions.tsx b/src/views/home/rightpanel/Missions.tsx
new file mode 100644
index 0000000..2d2abe8
--- /dev/null
+++ b/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>
+    );
+};