From 7a37170b0a3bcdde01cf42632dd1a173ba8c9e54 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Wed, 3 Jun 2026 20:17:35 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B1=D0=BE=D0=BA=D0=BE=D0=B2=D0=BE=D0=B5=20=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8E=20=D0=B4=D0=BB=D1=8F=20=D0=B4=D0=B8=D0=BD=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=BE=D0=B3=D0=BE=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B3?=
 =?UTF-8?q?=D1=80=D1=83=D0=BF=D0=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDropMenu.vue                 | 106 +++--------
 src/composables/usePartsCatalog.js            |  26 +--
 src/composables/useTopicResolver.js           |  34 ++--
 src/data/index.js                             |  20 +++
 .../components.json => src/data/parts.js      | 170 +++++++++---------
 .../{informationForDirectory.js => terms.js}  |  43 +++--
 src/views/TopicView.vue                       |  32 +++-
 7 files changed, 215 insertions(+), 216 deletions(-)
 create mode 100644 src/data/index.js
 rename public/droneComponents/components.json => src/data/parts.js (93%)
 rename src/data/{informationForDirectory.js => terms.js} (91%)

diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 0747490..8d77add 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -22,102 +22,57 @@
                     text-color="#ffffff"
                     active-text-color="#23aae3"
                 >
-                    <el-sub-menu index="parts">
+                    <el-sub-menu
+                        v-for="group in menuGroups"
+                        :key="group.source"
+                        :index="group.source"
+                    >
                         <template #title>
-                            <span class="menu-content__group-title">Компоненты дрона</span>
+                            <span class="menu-content__group-title">{{ group.name }}</span>
                         </template>
                         <el-menu-item
-                            v-for="part in parts"
-                            :key="part.id"
-                            :index="`part-${part.id}`"
+                            v-for="item in group.items"
+                            :key="`${group.source}-${item.id}`"
+                            :index="`${group.source}-${item.id}`"
                             class="menu-list-item"
-                            @click="openPart(part)"
-                        >
-                            <ListCard
-                                :title="part.name"
-                                :subtitle="part.category"
-                                :image="part.image"
-                                :active="isPartActive(part.id)"
-                            />
-                        </el-menu-item>
-                    </el-sub-menu>
-                    <el-sub-menu index="terms">
-                        <template #title>
-                            <span class="menu-content__group-title">Термины</span>
-                        </template>
-                        <el-menu-item
-                            v-for="(item, index) in informationForDirectory"
-                            :key="item.title"
-                            :index="`term-${index}`"
-                            class="menu-list-item"
-                            @click="openInfoCard(item)"
+                            @click="openTopic(group.source, item.id)"
                         >
                             <ListCard
                                 :title="item.title"
-                                :subtitle="getSubtitle(item.body)"
-                                :active="isModalVisible && infoCard.title === item.title"
+                                :subtitle="item.subtitle"
+                                :image="item.image"
+                                :active="isTopicActive(group.source, item.id)"
                             />
                         </el-menu-item>
                     </el-sub-menu>
                 </el-menu>
             </aside>
         </transition>
-
-        <MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
-            <template #header>
-                <strong>{{ infoCard.title }}</strong>
-            </template>
-            <main>
-                <p>{{ infoCard.body }}</p>
-            </main>
-            <template #footer>
-                <div class="navigation-wrapper__footer">
-                    <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация</custom-button>
-                    <custom-button @click="handleOkBtn">ОК</custom-button>
-                </div>
-            </template>
-        </MyDialog>
     </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import MyDialog from "@/components/MyDialog.vue";
-import CustomButton from '@/components/UI/CustomButton.vue'
 import ListCard from '@/components/UI/ListCard.vue'
-import informationForDirectory from "../data/informationForDirectory";
+import { getMenuGroups } from '@/data/index.js'
 import { useEventListener } from "@vueuse/core";
-import { usePartsCatalog } from '@/composables/usePartsCatalog';
 
 const route = useRoute()
 const router = useRouter()
-const { parts, loadParts } = usePartsCatalog()
 
 const isOpen = ref(false);
-const isModalVisible = ref(false);
-const infoCard = ref({})
+const menuGroups = ref([])
 
-function getSubtitle(body) {
-    if (!body) return ''
-    return body.length > 72 ? `${body.slice(0, 72)}…` : body
-}
-
-function isPartActive(partId) {
+function isTopicActive(source, id) {
     return route.name === 'topic'
-        && route.params.source === 'parts'
-        && Number(route.params.id) === partId
+        && route.params.source === source
+        && Number(route.params.id) === id
 }
 
-function openPart(part) {
+function openTopic(source, id) {
     isOpen.value = false
-    router.push({ name: 'topic', params: { source: 'parts', id: part.id } })
-}
-
-function handleOkBtn() {
-    isModalVisible.value = false
-    isOpen.value = true
+    router.push({ name: 'topic', params: { source, id } })
 }
 
 const toggleMenu = () => {
@@ -128,12 +83,6 @@ const closeMenu = () => {
     isOpen.value = false;
 };
 
-function openInfoCard(obj) {
-    isModalVisible.value = true
-    isOpen.value = false
-    infoCard.value = obj
-}
-
 const handleKeydown = (event) => {
     if (event.code === "Escape" && isOpen.value) {
         event.preventDefault();
@@ -143,7 +92,7 @@ const handleKeydown = (event) => {
 useEventListener("keydown", handleKeydown);
 
 onMounted(() => {
-    loadParts()
+    menuGroups.value = getMenuGroups()
 })
 
 defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
@@ -187,7 +136,6 @@ h1 {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
-.terms-menu-item,
 .menu-list-item {
     height: auto;
     line-height: normal;
@@ -196,13 +144,11 @@ h1 {
     white-space: normal;
 }
 
-.terms-menu-item :deep(.list-card),
 .menu-list-item :deep(.list-card) {
     margin: 0;
     width: 100%;
 }
 
-.terms-menu-item.is-active,
 .menu-list-item.is-active {
     background-color: transparent !important;
 }
@@ -252,16 +198,6 @@ h1 {
     display: flex;
 }
 
-main {
-    text-align: justify;
-}
-
-.navigation-wrapper__footer {
-    display: flex;
-    gap: 10px;
-    width: 100%;
-}
-
 .slide-enter-active,
 .slide-leave-active {
     transition: transform 0.39s ease;
diff --git a/src/composables/usePartsCatalog.js b/src/composables/usePartsCatalog.js
index 3d4a83a..b03b4ca 100644
--- a/src/composables/usePartsCatalog.js
+++ b/src/composables/usePartsCatalog.js
@@ -1,31 +1,11 @@
 import { ref } from 'vue'
+import partsItems from '@/data/parts.js'
 
-const parts = ref([])
-let loadPromise = null
+const parts = ref([...partsItems])
 
 export function usePartsCatalog() {
     async function loadParts() {
-        if (parts.value.length) {
-            return parts.value
-        }
-
-        if (!loadPromise) {
-            loadPromise = fetch('/droneComponents/components.json')
-                .then((response) => (response.ok ? response.json() : []))
-                .then((data) => {
-                    parts.value = data
-                    return data
-                })
-                .catch(() => {
-                    parts.value = []
-                    return []
-                })
-                .finally(() => {
-                    loadPromise = null
-                })
-        }
-
-        return loadPromise
+        return parts.value
     }
 
     function getPartById(id) {
diff --git a/src/composables/useTopicResolver.js b/src/composables/useTopicResolver.js
index 97f5b15..52d9731 100644
--- a/src/composables/useTopicResolver.js
+++ b/src/composables/useTopicResolver.js
@@ -1,20 +1,34 @@
-import { usePartsCatalog } from '@/composables/usePartsCatalog'
+import termsItems from '@/data/terms.js'
+import partsItems from '@/data/parts.js'
 
 export async function resolveTopic(source, id) {
-    if (source === 'parts') {
-        const { loadParts, getPartById } = usePartsCatalog()
-        await loadParts()
-        const part = getPartById(Number(id))
+    const numericId = Number(id)
 
-        if (!part) {
-            return null
-        }
+    if (source === 'terms') {
+        const term = termsItems.find((item) => item.id === numericId)
+        if (!term) return null
 
         return {
-            title: part.name,
-            subtitle: part.category,
+            title: term.title,
+            subtitle: term.subtitle,
+            image: term.image,
+            description: term.description,
+            hrefToCourse: term.hrefToCourse,
+            hrefToDoc: term.hrefToDoc,
+        }
+    }
+
+    if (source === 'parts') {
+        const part = partsItems.find((item) => item.id === numericId)
+        if (!part) return null
+
+        return {
+            title: part.title,
+            subtitle: part.subtitle,
             image: part.image,
             description: part.description,
+            hrefToCourse: null,
+            hrefToDoc: null,
         }
     }
 
diff --git a/src/data/index.js b/src/data/index.js
new file mode 100644
index 0000000..5c225e7
--- /dev/null
+++ b/src/data/index.js
@@ -0,0 +1,20 @@
+import partsItems from './parts.js'
+import termsItems from './terms.js'
+
+export function getMenuGroups() {
+    return [
+        {
+            name: 'Компоненты дрона',
+            source: 'parts',
+            items: partsItems,
+        },
+        {
+            name: 'Термины',
+            source: 'terms',
+            items: termsItems,
+        },
+    ]
+}
+
+export { default as partsItems, loadPartsItems } from './parts.js'
+export { default as termsItems } from './terms.js'
diff --git a/public/droneComponents/components.json b/src/data/parts.js
similarity index 93%
rename from public/droneComponents/components.json
rename to src/data/parts.js
index 44b8089..41496ed 100644
--- a/public/droneComponents/components.json
+++ b/src/data/parts.js
@@ -1,156 +1,162 @@
-[
+export const partsItems = [
   {
     "id": 1,
-    "name": "Пропеллеры (винты) дрона",
-    "category": "Силовая установка",
+    "title": "Пропеллеры (винты) дрона",
+    "subtitle": "Силовая установка",
     "image": "/droneComponents/images/prop.png",
     "description": "Пропеллеры (воздушные винты) — это лопасти, которые вращаются моторами и создают подъёмную силу и тягу для движения дрона.\n\nДва основных размера — это две цифры: первые две — диаметр (дюймы), последние две — шаг (расстояние, которое винт проходит за один оборот). Например, 5030: диаметр 5.0 дюймов, шаг 3.0 дюйма.\n\nОсновные правила:\n• Большой диаметр + низкий KV мотора = тяжёлые грузы и стабильность\n• Маленький диаметр + высокий KV = скорость и манёвренность\n• Чем больше шаг — тем быстрее дрон, но выше нагрузка на мотор\n\nПропеллеры бывают двух направлений вращения: CW (по часовой стрелке) и CCW (против часовой). У дрона всегда два винта крутятся в одну сторону, два — в другую для компенсации реактивного момента."
   },
   {
     "id": 2,
-    "name": "Регулятор оборотов (ESC)",
-    "category": "Электроника",
+    "title": "Регулятор оборотов (ESC)",
+    "subtitle": "Электроника",
     "image": "/droneComponents/images/esc.png",
     "description": "ESC (Electronic Speed Controller) — это устройство, которое получает сигнал от полётного контроллера и преобразует постоянный ток от АКБ в трёхфазный переменный ток для управления бесколлекторным мотором.\n\nФактически ESC — это «педаль газа» для каждого мотора: он меняет скорость вращения тысячи раз в секунду.\n\nОсновные характеристики:\n• Ток (A, амперы): максимальный ток, который ESC может пропустить без перегрева (например, 30A, 50A)\n• Напряжение (S): сколько банок LiPo поддерживает (2-6S и выше)\n• Прошивка (firmware): BLHeli_S, BLHeli_32, AM32 — влияет на плавность и отклик\n\nНа квадрокоптере 4 ESC: один на каждый мотор. Современные дроны часто используют 4-в-1 ESC (одна плата на все 4 мотора) — это компактнее, но если сгорает один канал, менять нужно всю плату."
   },
   {
     "id": 3,
-    "name": "АКБ дрона (аккумулятор)",
-    "category": "Батареи",
+    "title": "АКБ дрона (аккумулятор)",
+    "subtitle": "Батареи",
     "image": "/droneComponents/images/AKB.png",
     "description": "АКБ дрона — это аккумуляторная батарея (химический источник тока), которая обеспечивает питанием все системы БПЛА: двигатели, полетный контроллер, телеметрию, камеру.\n\nКоротко: это «топливный бак» дрона, от которого зависит время полёта.\n\nОсновные характеристики:\n• Тип: Li-Po (литий-полимерные) или Li-Ion (для дальних полётов)\n• Напряжение (S): 3S (11.1В), 4S (14.8В) — чем больше банок, тем мощнее\n• Ёмкость (mAh): влияет на время полёта (1500-5000 mAh)\n• Токоотдача (C): способность мгновенно отдавать энергию"
   },
   {
     "id": 4,
-    "name": "Моторы дрона (электродвигатели)",
-    "category": "Силовая установка",
+    "title": "Моторы дрона (электродвигатели)",
+    "subtitle": "Силовая установка",
     "image": "/droneComponents/images/motor.png",
     "description": "Моторы дрона — это электродвигатели, которые преобразуют энергию от АКБ во вращение пропеллеров, создавая подъёмную силу и управляя движением коптера.\n\nСуществует два типа: бесколлекторные (Brushless) — стандарт для всех современных дронов (FPV, DJI), высокий КПД и мощность; коллекторные (Brushed) — только в дешёвых игрушках, малый ресурс.\n\nКлючевые характеристики:\n• Размер (4 цифры, например 2207): первые две — диаметр статора (мм), последние две — высота статора (мм)\n• KV (оборотов на вольт): низкий KV (1700-2000) — для тяжёлых грузов и больших винтов, высокий KV (2500-5000+) — для скорости и маленьких винтов\n• ESC (регулятор оборотов): преобразует постоянный ток батареи в трёхфазный для мотора\n\nПравило подбора: чем тяжелее дрон и длиннее винты, тем ниже должно быть KV. Перегрев мотора после полёта — признак перегрузки."
-},
-{
+  },
+  {
     "id": 5,
-    "name": "PDB (Плата распределения питания)",
-    "category": "Электроника",
+    "title": "PDB (Плата распределения питания)",
+    "subtitle": "Электроника",
     "image": "/droneComponents/images/pdb.png",
     "description": "PDB (Power Distribution Board) — это плата, которая принимает питание от АКБ и распределяет его между всеми потребителями: регуляторами оборотов (ESC), полётным контроллером, видеопередатчиком и другой периферией.\n\nЧасто PDB выполняет роль центральной «силовой магистрали» дрона, к ней сходятся все толстые провода.\n\nОсновные возможности:\n• Медные дорожки рассчитаны на большой ток (до 100+ Ампер)\n• Имеет посадочные места для пайки ESC и других устройств\n• Может включать встроенный BEC для питания электроники (5В или 12В)\n• На современных дронах часто интегрирована прямо в полётный контроллер (FC) — тогда отдельная PDB не нужна"
-},
-{
+  },
+  {
     "id": 6,
-    "name": "BEC (Блок стабилизации напряжения)",
-    "category": "Электроника",
+    "title": "BEC (Блок стабилизации напряжения)",
+    "subtitle": "Электроника",
     "image": "/droneComponents/images/bec.png",
     "description": "BEC (Battery Elimination Circuit) — это преобразователь напряжения, который понижает высокое напряжение от АКБ (например, 14.8В от 4S) до стабильного низкого напряжения (обычно 5В или 12В) для питания чувствительной электроники: полётного контроллера, приёмника, GPS, LED-лент.\n\nНазвание произошло от того, что раньше моделистам нужна была отдельная батарея для электроники, а BEC «устранил» эту батарею.\n\nТипы BEC:\n• Линейный (Linear): простой и дешёвый, но греется и неэффективен при большом перепаде напряжения\n• Импульсный (Switching / UBEC): дороже, но холодный и эффективный — используется в большинстве дронов\n\nГде встречается:\n• Встроен в PDB\n• Встроен в ESC (обычно BEC есть в одном из ESC для питания FC)\n• Отдельный модуль (UBEC) для мощных или особо чувствительных систем\n\nВажно: BEC должен выдавать достаточно тока (ампер) для всей подключаемой электроники."
-},
-{
+  },
+  {
     "id": 7,
-    "name": "Зарядное устройство (балансировочное)",
-    "category": "Зарядные устройства",
+    "title": "Зарядное устройство (балансировочное)",
+    "subtitle": "Зарядные устройства",
     "image": "/droneComponents/images/zaryadka.png",
     "description": "Зарядное устройство (LiPo балансировочный зарядник) — это внешний прибор для безопасной зарядки и обслуживания литий-полимерных (LiPo) и литий-ионных (Li-Ion) аккумуляторов дронов.\n\nПростые USB-зарядки из комплекта — это «медленные и опасные» зарядки без балансировки. Хорошее зарядное устройство обязательно выполняет балансировку — выравнивает напряжение на каждой банке (ячейке) АКБ, продлевая срок службы и предотвращая пожар.\n\nОсновные характеристики:\n• Тип: балансировочное (обязательно для LiPo)\n• Мощность: измеряется в Ваттах (например, 50W, 200W, 500W) — влияет на скорость зарядки\n• Ток заряда: 1С (рекомендуемый) — для АКБ 1500mAh это 1.5A\n• Режимы: заряд, разряд, хранение (storage), балансировка\n• Количество каналов: одноканальные или многоканальные (можно заряжать несколько АКБ сразу)\n\nПопулярные модели: ToolkitRC M6D, HOTA D6 Pro, SkyRC B6, ISDT Q6\n\nПравило безопасности: никогда не оставляйте LiPo без присмотра во время зарядки — используйте огнестойкий мешок (LiPo safe bag)."
-},
-{
+  },
+  {
     "id": 8,
-    "name": "Полётный контроллер (FC)",
-    "category": "Электроника",
+    "title": "Полётный контроллер (FC)",
+    "subtitle": "Электроника",
     "image": "/droneComponents/images/controller.png",
     "description": "Полётный контроллер (Flight Controller, FC) — это главный процессор дрона, который обрабатывает сигналы с датчиков и управляет моторами через ESC, чтобы стабилизировать полёт и выполнять команды пилота.\n\nЭто «мозг» дрона: он получает данные о положении, угле крена, высоте, читает команды с пульта (газ, крен, тангаж, рыскание) и мгновенно подкручивает обороты каждого мотора тысячи раз в секунду.\n\nЧто современные FC умеют:\n• Стабилизация (режимы Angle/Horizon для новичков и Acro для профессионалов)\n• Поддержка Betaflight, INAV, ArduPilot (прошивки)\n• Блэкбокс (запись полётных данных для анализа)\n• Встроенный барометр, гироскоп, иногда OSD (наложение данных на видео)\n\nПопулярные модели: SpeedyBee F405, MATEK F405, Kakute H7, Pixhawk (для тяжёлых дронов)."
-},
-{
+  },
+  {
     "id": 9,
-    "name": "Гироскоп и акселерометр (IMU)",
-    "category": "Датчики",
+    "title": "Гироскоп и акселерометр (IMU)",
+    "subtitle": "Датчики",
     "image": "/droneComponents/images/imu.png",
     "description": "Гироскоп и акселерометр — это датчики положения дрона в пространстве. Оба распаяны прямо внутри корпуса полётного контроллера и вместе образуют IMU (Inertial Measurement Unit).\n\nКак работают:\n• Гироскоп измеряет угловую скорость (как быстро дрон вращается вокруг осей: крен, тангаж, рыскание)\n• Акселерометр измеряет линейные ускорения (включая гравитацию — чтобы определить, где «низ»)\n\nСовместная работа: FC объединяет данные обоих датчиков (сенсорная фьюжн) и получает точные углы наклона (attitude).\n\nВажно: акселерометр нужен только для режимов стабилизации (Angle/Horizon). В режиме Acro (свободный полёт) многие пилоты отключают акселерометр для более чистой работы гироскопа.\n\nПопулярные модели датчиков: MPU6000, MPU6050, BMI270, ICM42688."
-},
-{
+  },
+  {
     "id": 10,
-    "name": "Барометр (датчик высоты)",
-    "category": "Датчики",
+    "title": "Барометр (датчик высоты)",
+    "subtitle": "Датчики",
     "image": "/droneComponents/images/barometr.png",
     "description": "Барометр — это датчик, который измеряет высоту дрона по изменению атмосферного давления. Чаще всего он уже встроен прямо в полётный контроллер.\n\nПринцип работы: чем выше поднимается дрон, тем ниже давление воздуха. Барометр фиксирует эту разницу и вычисляет высоту.\n\nОсобенности:\n• Работает только на открытом воздухе (давление не меняется в помещении из-за закрытого объёма)\n• Даёт абсолютную высоту относительно стартовой точки\n• Основной датчик для удержания высоты в GPS-режиме и при автономных полётах (INAV, ArduPilot)\n• Точность обычно до ±0.5-1 метра (но чувствителен к ветру и изменениям погоды)\n\nПопулярные модели: BMP280, BMP388, MS5611 (более дорогой и точный)."
-},
-{
+  },
+  {
     "id": 11,
-    "name": "Дальномер (ультразвуковой или лазерный)",
-    "category": "Датчики",
+    "title": "Дальномер (ультразвуковой или лазерный)",
+    "subtitle": "Датчики",
     "image": "/droneComponents/images/dalnomer.png",
     "description": "Дальномер — это датчик для точного измерения расстояния от дрона до земли или препятствия. Используется для удержания высоты на малых высотах (до нескольких метров), где барометр даёт грубую ошибку.\n\nДва основных типа:\n• Ультразвуковой (SONAR): работает по принципу эхолокации — излучает звук и замеряет время возврата эха. Дёшево, но чувствителен к шуму и работает плохо над травой/водой. Дальность: 0.1-5 м.\n• Лазерный (LiDAR / TOF): измеряет время пролёта лазерного луча. Точный, не боится шума, работает на любых поверхностях. Дальность: до 10-30 метров. Дороже.\n\nГде применяется: дроны для съёмки, агродроны, дроны для полётов в помещениях (где нет GPS). В FPV-гоночных дронах почти не встречается."
-},
-{
+  },
+  {
     "id": 12,
-    "name": "GPS / Компас (магнитометр)",
-    "category": "Датчики",
+    "title": "GPS / Компас (магнитометр)",
+    "subtitle": "Датчики",
     "image": "/droneComponents/images/gps.png",
     "description": "GPS/Компас — это модуль, который позволяет дрону знать своё местоположение на Земле и направление относительно магнитных полюсов (север/юг). Рекомендуется для любого дрона, который летает на улице.\n\nЧто даёт:\n• Удержание точки (Position Hold) — дрон зависает на месте даже при ветре\n• Возврат домой (RTH — Return To Home) — при потере сигнала или низком заряде дрон возвращается на точку взлёта\n• Полёты по точкам (Waypoints) — автономные миссии\n• Telemetry (скорость, высота, расстояние до дома, координаты)\n\nСостав:\n• GPS приёмник: определяет координаты, высоту (по спутникам), скорость\n• Магнитометр (компас): определяет направление по магнитному полю Земли (нужен для RTH, иначе дрон не поймёт, куда лететь)\n\nВажно: компас требует калибровки перед полётом и страдает от электромагнитных помех от проводов с током. Модуль должен стоять подальше от силовой проводки.\n\nФорматы: M8N, M10, M8Q (чем новее, тем лучше). Рекомендуется M10 с защитой от помех."
-},
-{
+  },
+  {
     "id": 13,
-    "name": "Аппаратура управления (пульт пилота)",
-    "category": "Управление",
+    "title": "Аппаратура управления (пульт пилота)",
+    "subtitle": "Управление",
     "image": "/droneComponents/images/appa.png",
     "description": "Аппаратура управления (Transmitter, TX, пульт) — это устройство в руках пилота, которое отправляет команды на дрон: газ, крен, тангаж, рыскание, а также переключение режимов полёта и дополнительные функции.\n\nЭто «руль и педали» дрона. Современные пульты работают в цифровых протоколах и имеют телеметрию — обратную связь с дроном (уровень батареи, сигнал, высота).\n\nОсновные характеристики:\n• Количество каналов: минимально 4 (газ, крен, тангаж, рыскание), для FPV нужно 6-8 каналов (режимы, бипер, арм)\n• Протокол связи: ELRS (ExpressLRS) — современный стандарт для FPV (дальность километры), также Crossfire, Ghost, FrSky (ACCST, ACCESS)\n• Мощность передатчика: 100mW, 250mW, 1W — влияет на дальность\n• Частота: 2.4 ГГц (стандарт) или 900 МГц (лучшее проникновение через препятствия)\n\nФорм-факторы:\n• Геймпад (игровой стиль): Radiomaster Zorro, Jumper T-Pro\n• Боксёр (классический): Radiomaster TX16S, TBS Mambo, FrSky X18\n• Для новичков: LiteRadio 3, BetaFPV LiteRadio\n\nВажно: пульт должен поддерживать тот же протокол, что и приёмник на дроне (например, оба на ELRS)."
-},
-{
+  },
+  {
     "id": 14,
-    "name": "Приёмник (Receiver, RX)",
-    "category": "Управление",
+    "title": "Приёмник (Receiver, RX)",
+    "subtitle": "Управление",
     "image": "/droneComponents/images/rx.png",
     "description": "Приёмник (Receiver, RX) — это устройство, которое крепится на дрон, принимает радиосигнал с пульта пилота и передаёт команды на полётный контроллер.\n\nЭто «уши» дрона. Без него вы не сможете управлять дроном — он просто не услышит команды.\n\nКак работает:\n1. Пилот двигает стики на пульте → пульт кодирует команды в радиосигнал\n2. Приёмник на дроне ловит сигнал и расшифровывает его\n3. Полётный контроллер читает данные с приёмника (через протоколы типа SBUS, CRSF) и управляет моторами\n\nОсновные характеристики:\n• Протокол связи: должен совпадать с пультом (ELRS, Crossfire, FrSky, DJI, Spektrum)\n• Количество каналов: обычно 6-16 (чем больше, тем больше функций)\n• Дальность: зависит от мощности и протокола — у ELRS на 100mW можно летать на километры\n• Антенны: один или два штырька (диверсити — две антенны для лучшего приёма)\n\nПопулярные модели:\n• ELRS: Radiomaster RP1, Happymodel EP1/EP2, BetaFPV ELRS Lite\n• Crossfire: TBS Crossfire Nano RX\n• FrSky: XM+, R-XSR (устаревающий, но ещё встречается)\n\nВажно: приёмник должен быть совместим с полётным контроллером (обычно подключается через UART и протокол CRSF для ELRS или SBUS для FrSky)."
-},
-{
+  },
+  {
     "id": 15,
-    "name": "FPV-камера",
-    "category": "Видеосистема",
+    "title": "FPV-камера",
+    "subtitle": "Видеосистема",
     "image": "/droneComponents/images/camera.png",
     "description": "FPV-камера — это устройство, которое крепится на дрон и передаёт картинку с его «глаз» в реальном времени. Пилот видит эту картинку в очках или на экране и управляет дроном от первого лица.\n\nЭто «глаза» дрона. Без FPV-камеры полёт от первого лица невозможен.\n\nОсновные характеристики:\n• Размер: самый популярный — 19x19 мм для дронов 3-5 дюймов, также 14x14 мм и 27x27 мм\n• Сенсор: CCD (устаревший, плавная картинка при изменении освещения) или CMOS (современный, лучшее качество)\n• Соотношение сторон: 4:3 (классика) или 16:9 (широкоэкранный)\n• Разрешение: стандартное ~600TVL (аналог), 1080p (цифровые системы типа DJI O4)\n• WDR (широкий динамический диапазон): позволяет видеть детали и в тени, и на свету — критично для полётов против солнца\n• Задержка (латентность): для аналога <5-10 мс, для цифры ~20-40 мс — чем меньше, тем лучше для быстрых маневров\n\nПопулярные модели:\n• Аналог: Caddx Ratel 2, Foxeer T-Rex, Runcam Phoenix 2\n• HDZero: Runcam HDZero\n• Walksnail: Avatar HD\n• DJI: O3 Air Unit (камера + VTX в одном корпусе)"
-},
-{
+  },
+  {
     "id": 16,
-    "name": "Видеопередатчик (VTX)",
-    "category": "Видеосистема",
+    "title": "Видеопередатчик (VTX)",
+    "subtitle": "Видеосистема",
     "image": "/droneComponents/images/videopered.png",
     "description": "Видеопередатчик (Video Transmitter, VTX) — это устройство, которое получает видеосигнал с FPV-камеры и транслирует его по радиочастоте на землю (в очки или монитор пилота).\n\nЭто «радиостанция» дрона для видео. VTX определяет, насколько далеко и с каким качеством вы увидите картинку.\n\nОсновные характеристики:\n• Мощность: 25mW, 200mW, 600mW, 1W (1000mW) и выше. Чем выше мощность, тем дальше полёт, но сильнее нагрев\n• Частота: 5.8 ГГц (стандарт для FPV). Бывают ещё 1.3 ГГц и 2.4 ГГц, но редко\n• Каналы: 40+ каналов, включая Raceband (самые чистые частоты для групповых полётов)\n• Тип: аналоговый (дешевле, меньше задержка) или цифровой (качество как на телевизоре, дороже)\n• SmartAudio / Tramp: протоколы для управления VTX с пульта (переключать каналы и мощность в полёте)\n\nПопулярные модели:\n• Аналог: TBS Unify Pro32, Rush Tank Ultimate, Eachine Nano\n• Цифровые системы: DJI O3/O4 Air Unit, Walksnail Avatar, HDZero\n\nВажно: VTX сильно греется — его нельзя включать без антенны (сгорит). Нужен обдув от пропеллеров или радиатор."
-},
-{
+  },
+  {
     "id": 17,
-    "name": "Антенна видеопередатчика",
-    "category": "Видеосистема",
+    "title": "Антенна видеопередатчика",
+    "subtitle": "Видеосистема",
     "image": "/droneComponents/images/antena.png",
     "description": "Антенна видеопередатчика (VTX Antenna) — это устройство, которое излучает видеосигнал VTX в окружающее пространство. Качество антенны напрямую влияет на дальность и надёжность видеосвязи.\n\nЭто «рупор» дрона для видео. Без антенны VTX не только не передаёт сигнал, но и сгорает от перегрева.\n\nТипы антенн:\n• Штыревая (Whip / Linear): простая, дешёвая, но плохая помехозащищённость — подходит только для очень маленьких дронов\n• Клеверный лист (Cloverleaf / RHCP): круговая поляризация, лучше проникает через препятствия\n• Пагода (Pagoda): дешёвая и эффективная круговая антенна\n• Лутц (Lumenier AXII, TrueRC): современные высококачественные антенны с лучшим коэффициентом усиления\n\nПоляризация:\n• RHCP (Right-Hand Circular Polarized) — правая круговая (стандарт FPV)\n• LHCP (Left-Hand Circular Polarized) — левая круговая (несовместима с RHCP!)\n\nВажно: антенна на дроне и антенны на очках должны иметь одинаковую поляризацию (например, обе RHCP). Иначе дальность упадёт в 10-20 раз.\n\nФорм-факторы: короткая (для минидронов) или длинная (лучше сигнал на большом дроне)."
-},
-{
+  },
+  {
     "id": 18,
-    "name": "FPV-шлем / очки",
-    "category": "Видеосистема",
+    "title": "FPV-шлем / очки",
+    "subtitle": "Видеосистема",
     "image": "/droneComponents/images/ochki.png",
     "description": "FPV-шлем или очки (Goggles / Video Receiver) — это устройство, которое пилот надевает на голову. Оно принимает видеосигнал с видеопередатчика (VTX) дрона и показывает картинку с камеры прямо перед глазами, создавая эффект полного погружения «от первого лица».\n\nЭто «окно в кабину» дрона. Без них FPV-полёт теряет смысл.\n\nДва основных типа:\n• Очки-«бабочка» (Box Goggles): один большой экран внутри корпуса. Дешевле, подходят для новичков и людей в очках. Пример: Eachine EV800D.\n• Компактные очки (Slim Goggles): два маленьких экрана, выглядят как лыжная маска. Дороже, компактнее, легче. Пример: FatShark, DJI Goggles.\n\nОсновные характеристики:\n• Приёмник (аналоговый или цифровой): должен совпадать с VTX дрона — аналог не примет цифру и наоборот\n• Разрешение экранов: от 480p до 1080p\n• Угол обзора (FOV): от 30° до 60° — чем больше, тем сильнее погружение\n• Запись видео: многие очки пишут DVR (то, что видел пилот) на SD-карту\n• HDMI-вход: позволяет подключать симулятор или цифровые системы сторонних производителей\n• Диоптрии / регулировка линз: для близоруких пилотов\n\nПопулярные модели:\n• Аналоговые: Eachine EV800D (начальный), FatShark Attitude V6, Skyzone Cobra X\n• Цифровые: DJI Goggles 2 / Integra / V2, Walksnail Avatar Goggles X, HDZero Goggles\n\nВажно: антенны на очках должны совпадать по поляризации с антенной на дроне (RHCP с RHCP, LHCP с LHCP)."
-},
-{
+  },
+  {
     "id": 19,
-    "name": "Рама и лучи (несущая основа)",
-    "category": "Конструкция",
+    "title": "Рама и лучи (несущая основа)",
+    "subtitle": "Конструкция",
     "image": "/droneComponents/images/frame.png",
     "description": "Рама — это несущая основа дрона, на которую крепятся все компоненты: моторы, полётный контроллер, АКБ, видеопередатчик и остальная электроника. Лучи (arms) — это «руки» дрона, на концах которых устанавливаются моторы. Лучи обычно являются частью рамы (бывают цельные или съёмные).\n\nЭто «скелет» дрона. От жёсткости и веса рамы зависит стабильность полёта и устойчивость к вибрациям.\n\nОсновные материалы:\n• Карбон (углепластик) — самый популярный для FPV: лёгкий, жёсткий, не гнётся. Классическая толщина — 3-4 мм для рамы, 5-6 мм для лучей.\n• Пластик — для игрушек и дешёвых дронов (хрупкий).\n• Алюминий/сталь — для тяжёлых промышленных дронов (редко).\n\nХарактеристики рамы:\n• Размер (wheelbase): расстояние по диагонали между центрами моторов (например, 250 мм для 5-дюймового дрона)\n• Форма: X (симметричный), True X (равные плечи), Wide X (широкий), Deadcat (передние лучи разведены — камера не попадает в кадр)\n• Совместимость с моторами: крепление 12x12 мм (микро), 16x16 мм, 19x19 мм (стандарт M3)\n\nПопулярные производители: TBS, iFlight, GEPRC, Armattan (гарантия на поломку), Source One (дешёвый и хороший)."
-},
-{
+  },
+  {
     "id": 20,
-    "name": "Фюзеляж (защитный капот)",
-    "category": "Конструкция",
+    "title": "Фюзеляж (защитный капот)",
+    "subtitle": "Конструкция",
     "image": "/droneComponents/images/fuzelazh.png",
     "description": "Фюзеляж — это защитный капот (корпус), который закрывает и защищает электронику дрона: полётный контроллер, приёмник, видеопередатчик и провода от пыли, влаги и ударов. Нужен не всем дронам — чаще используется на самолётах (крылатых БПЛА) или готовых consumer-дронах (DJI, Autel).\n\nЭто «кузов» или «кабина» дрона. В FPV-коптерах почти не встречается, так как карбоновая рама сама по себе защищает компоненты, а открытый доступ упрощает ремонт.\n\nГде применяется:\n• Самолёты и крылья: обтекаемый фюзеляж для аэродинамики\n• Промышленные октокоптеры: пыле- и брызгозащита (степень IP54+)\n• Готовые дроны (DJI Mavic, DJI Phantom, Autel Evo): полный пластиковый корпус для защиты и красоты\n• Детские и игрушечные дроны: весь дрон — один большой корпус\n\nМатериалы: пластик (ABS, поликарбонат), пенопласт (для самолётов), иногда карбон с накладками.\n\nВажно: в FPV квадрокоптерах вместо фюзеляжа используют 3D-печатные фиксаторы для АКБ, кейсы для GoPro и небольшой «капот» (top plate) на верхней плате рамы — это минималистичный вариант."
-},
-{
+  },
+  {
     "id": 21,
-    "name": "Светодиодная лента (LED / подсветка)",
-    "category": "Электроника",
+    "title": "Светодиодная лента (LED / подсветка)",
+    "subtitle": "Электроника",
     "image": "/droneComponents/images/ledstrip.png",
     "description": "Светодиодная лента (LED-подсветка) — это адресные или обычные светодиоды на гибкой плате, которые крепятся на раму дрона. Используется для индикации статуса (вооружён/не вооружён, режим полёта, уровень заряда АКБ) и для визуальной ориентации дрона в темноте.\n\nЭто «световая сигнализация» и «габаритные огни» дрона. Позволяет понять, куда повёрнут дрон ночью и готов ли он к взлёту.\n\nТипы:\n• Обычные одноцветные: просто горят красным/синим/белым (дешёвые)\n• Адресные (WS2812B / NeoPixel): каждый светодиод можно управлять индивидуально — менять цвет, яркость, эффекты (бегущие огни, мигание)\n\nЧто можно делать:\n• Подключить к полётному контроллеру (UART или LED-порт) и настроить в Betaflight\n• Включить разные цвета для задних (обычно красные, тёплые) и передних (синие/белые/холодные) лучей для ориентации\n• Мигать при низком заряде АКБ\n• Светить ярко-синим/зелёным при вооружении (arm)\n\nПараметры: напряжение 5В (питается от BEC), количество светодиодов: 4-8 шт на дрон, длина обычно 1-2 метра на дрон.\n\nВажно: в Betaflight есть встроенный режим для WS2812B — не требует программирования."
-},
-{
+  },
+  {
     "id": 22,
-    "name": "Вольтметр (пищалка / LiPo Buzzer)",
-    "category": "Аксессуары",
+    "title": "Вольтметр (пищалка / LiPo Buzzer)",
+    "subtitle": "Аксессуары",
     "image": "/droneComponents/images/volt.png",
     "description": "Вольтметр (называется также пищалкой, LiPo Buzzer, checker) — это маленькое устройство, которое подключается к балансировочному разъёму АКБ. Оно измеряет напряжение на каждой банке (ячейке) аккумулятора и громко пищит, когда напряжение падает ниже заданного порога, предупреждая пилота о скором разряде.\n\nЭто «сигнализация разряда» для аккумулятора. Предотвращает глубокий разряд LiPo — одну из главных причин выхода батареи из строя и пожара при зарядке.\n\nКак работает:\n1. Вставляешь в балансировочный разъём АКБ (тот, что с несколькими тонкими проводами)\n2. Устанавливаешь порог писка (для LiPo это 3.3-3.5В на банку)\n3. Когда напряжение на любой банке падает ниже порога — пищалка орёт (сигнал слышен с дрона на 50-100 метров)\n4. Пилот слышит звук и сажает дрон, чтобы не убить батарею\n\nХарактеристики:\n• Диапазон измерения: 1-8 банок (S) (чаще всего 2-6S)\n• Настройка порога срабатывания: кнопками на корпусе (например, 3.3В, 3.4В, 3.5В)\n• Режимы: звуковой сигнал (непрерывный или прерывистый), иногда дисплей с напряжением\n• Размер: маленький (2x3 см), вес 5-10 грамм\n\nВажно: в современных полётных контроллерах есть встроенный функционал пищалки через моторы (dshot beeper) — моторы сами издают звук, и отдельная пищалка не нужна. Но внешний вольтметр надёжнее: он работает даже при отказе полётного контроллера или разряде, когда ESC уже не могут пищать.\n\nПравило: всегда начинающим рекомендуется иметь такой buzzer — он стоит 50-100 рублей и спасёт не один аккумулятор."
+  }
+]
+
+export async function loadPartsItems() {
+    return partsItems
 }
-]
\ No newline at end of file
+
+export default partsItems
diff --git a/src/data/informationForDirectory.js b/src/data/terms.js
similarity index 91%
rename from src/data/informationForDirectory.js
rename to src/data/terms.js
index adc9a74..cb50432 100644
--- a/src/data/informationForDirectory.js
+++ b/src/data/terms.js
@@ -1,74 +1,89 @@
-export default [
+const rawTerms = [
     {
         title: 'ROS',
         body: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
         hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748',
     },
     {
         title: 'OpenCV',
         body: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
         hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893',
     },
     {
         title: 'navigate_wait',
         body: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
-        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
+        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803',
     },
     {
         title: 'Нода (Node)',
         body: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758',
     },
     {
         title: 'Топик (Topic)',
         body: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
         title: 'Издатель (Publisher)',
         body: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
         title: 'Подписчик (Subscriber)',
         body: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
         title: 'Сервис',
         body: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206',
     },
     {
         title: 'Системы координат',
         body: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
+        hrefToDoc: 'https://clover.coex.tech/ru/frames.html',
     },
     {
         title: 'ArUco-маркер',
         body: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html'
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html',
     },
     {
         title: 'Симулятор (Gazebo)',
         body: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
         hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
-        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html'
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html',
     },
     {
         title: 'unregister()',
         body: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
         hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
-        hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html'
+        hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html',
     },
-]
\ No newline at end of file
+]
+
+function toSubtitle(text) {
+    if (!text) return ''
+    return text.length > 72 ? `${text.slice(0, 72)}…` : text
+}
+
+export default rawTerms.map((item, index) => ({
+    id: index + 1,
+    title: item.title,
+    subtitle: toSubtitle(item.body),
+    image: '',
+    description: item.body,
+    hrefToDoc: item.hrefToDoc ?? null,
+    hrefToCourse: item.hrefToCourse ?? null,
+}))
diff --git a/src/views/TopicView.vue b/src/views/TopicView.vue
index b51ede4..180bea7 100644
--- a/src/views/TopicView.vue
+++ b/src/views/TopicView.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { resolveTopic } from '@/composables/useTopicResolver'
 import MyDropMenu from "@/components/MyDropMenu.vue";
-import { inject, provide } from "vue";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -48,6 +48,26 @@ function goBack() {
             </div>
 
             <p class="topic-view__description">{{ topic.description }}</p>
+
+            <div
+                v-if="topic.hrefToCourse || topic.hrefToDoc"
+                class="topic-view__links"
+            >
+                <CustomButton
+                    v-if="topic.hrefToCourse"
+                    :to="topic.hrefToCourse"
+                    title="Посмотреть на Stepik"
+                >
+                    Курс
+                </CustomButton>
+                <CustomButton
+                    v-if="topic.hrefToDoc"
+                    :to="topic.hrefToDoc"
+                    title="Посмотреть в официальной документации"
+                >
+                    Документация
+                </CustomButton>
+            </div>
         </article>
     </div>
 </template>
@@ -123,4 +143,12 @@ function goBack() {
     color: rgba(255, 255, 255, 0.85);
     white-space: pre-wrap;
 }
+
+.topic-view__links {
+    display: flex;
+    gap: 10px;
+    margin-top: 30px;
+    padding-top: 25px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
 </style>