Merge branch 'miheev-dev' of https://github.com/IliaMiheev/probody into gerasimova-dev

src/App.vue

@@ -1,11 +1,12 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import {ref, onMounted, h} from "vue";
-import izitoast from "./izitoast";
+import izitoast from "@/shared/izitoast";
 import {useEventListener} from "@vueuse/core";
-import MyDialog from "./components/MyDialog.vue";
+import MyDialog from "@/components/MyDialog.vue";
-import MyDropMenu from "./components/MyDropMenu.vue";
+import MyDropMenu from "@/components/MyDropMenu.vue";
-import copyToclipboard from "./copyToclipboard";
+import copyToclipboard from "@/shared/copyToclipboard";
-import ContextMenu from '@imengyu/vue3-context-menu'
+import ContextMenu from "@imengyu/vue3-context-menu";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
@@ -36,7 +37,7 @@ function setNumber(item) {
         clickCount.value++;
     } else {
         //если нажимаем на ранее отмеченную клетку, то выводится ошибка
-        if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
+        if (item.variable.at(-1) === clickCount.value - 1) {
             izitoast.error({
                 title: "Ошибка",
                 message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
@@ -44,7 +45,7 @@ function setNumber(item) {
             return;
         }
         listOfTrips.value.push(item);
-        numbers.value[item.index].variable.push(clickCount.value);
+        item.variable.push(clickCount.value);
         clickCount.value++;
     }
 }
@@ -89,31 +90,35 @@ async function saveResult() {
     finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
     if (isUsedPlatform) {
         finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
+    } else {
+        finallyText.value = finallyText.value.replace("<<ColorDetect>>", '');
     }
     if (isUsedQR) {
         finallyText.value = finallyText.value.replace("<<qr_function>>", QRDetectClass.value);
+    } else {
+        finallyText.value = finallyText.value.replace("<<qr_function>>", '');
     }
-    isModalVisible.value = true;}
+    isModalVisible.value = true;
-    
+}
 
 function cancel() {
-
     if (clickCount.value === 1) {
         return;
-    } else {
-        numbers.value[listOfTrips.value.at(-1).index].variable.pop();
-        listOfTrips.value.pop();
-        clickCount.value--;
     }
+    listOfTrips.value.at(-1).variable.pop();
+    listOfTrips.value.pop();
+    clickCount.value--;
 }
 
 function cleanResult() {
     clickCount.value = 1;
+    listOfTrips.value.forEach(item => {
+        item.isPlatform = false;
+        item.isQR = false;
+        item.variable = [];
+        item.BgImg = 'images/ArUco-marker.jpg'
+    })
     listOfTrips.value = [];
-    for (let i = 0; i < 100; i++) {
-        numbers.value[i].variable = [];
-        numbers.value[i].BgImg = 'images/ArUco-marker.jpg'
-    }
 }
 
 // Обрабатываем нажатие Ctrl + Z
@@ -158,43 +163,67 @@ function handleDownloadBtn() {
 }
 
 function createPlatform(item, color) {
-    if (!item.isPlatform) {
+    if (!item.variable.length) {
+        item.variable.push(clickCount.value);
         listOfTrips.value.push(item)
-        numbers.value[item.index].variable.push(clickCount.value);
+        clickCount.value++
     }
-    item['isPlatform'] = true
+    item.isPlatform = true;
-    numbers.value[item.index].BgImg = `images/${color}-platform.jpg`
+    item.isQR = false;
-    clickCount.value++
+    item.BgImg = `images/${color}-platform.jpg`
 }
 
 function deletePlatform(item) {
-    item['isPlatform'] = false
+    item.BgImg = 'images/ArUco-marker.jpg'
-    const index = listOfTrips.value.indexOf(item);
+    item.isPlatform = false
-    if (index !== -1) {
-        listOfTrips.value.splice(index, 1);
-    }
-    numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
-    clickCount.value--
 }
 
 function createQR(item) {
-    if (!item.isQR) {
+    if (!item.variable.length) {
+        item.variable.push(clickCount.value);
         listOfTrips.value.push(item)
-        numbers.value[item.index].variable.push(clickCount.value);
+        clickCount.value++
     }
-    item['isQR'] = true
+    item.isPlatform = false;
-    numbers.value[item.index].BgImg = `images/qr.jpg`
+    item.isQR = true;
-    clickCount.value++
+    item.BgImg = `images/qr.jpg`
 }
 
 function deleteQR(item) {
-    item['isQR'] = false
+    item.BgImg = 'images/ArUco-marker.jpg'
+    item.isQR = true
+}
+
+function deletePointMap(item) {
     const index = listOfTrips.value.indexOf(item);
     if (index !== -1) {
+        const deletedIndex = item.variable.at(-1)
+        listOfTrips.value.forEach(square => {
+            square.variable.map(itemVariable => {
+                if (itemVariable === deletedIndex) {
+                    square.variable = []
+                }
+                if (itemVariable > deletedIndex) {
+                    square.variable[square.variable.indexOf(itemVariable)]--
+                }
+            })
+        })
         listOfTrips.value.splice(index, 1);
+        clickCount.value--
+        item.isQR = false
+        item.isPlatform = false
+        item.BgImg = 'images/ArUco-marker.jpg'
     }
-    numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
+}
-    clickCount.value--
+
+function createIcon(src) {
+    return h('img', {
+        src: src,
+        style: {
+            width: '20px',
+            height: '20px',
+        }
+    })
 }
 
 function onContextMenu(e, item) {
@@ -204,44 +233,52 @@ function onContextMenu(e, item) {
         y: e.y,
         items: [
             {
-                label: "Платформы",
+                label: "Платформа",
+                icon: createIcon('icons/base_square.webp'),
                 children: [
                     {
                         label: "Белая",
                         onClick: () => createPlatform(item, 'white'),
+                        icon: createIcon('icons/white_square.webp'),
                     },
                     {
                         label: "Синяя",
                         onClick: () => createPlatform(item, 'blue'),
+                        icon: createIcon('icons/blue_square.webp'),
                     },
                     {
                         label: "Красная",
                         onClick: () => createPlatform(item, 'red'),
+                        icon: createIcon('icons/red_square.webp'),
                     },
                     {
                         label: "Удалить",
                         onClick: () => deletePlatform(item),
+                        icon: createIcon('icons/trash.webp'),
                     },
                 ]
             },
             {
                 label: "QR код",
+                icon: createIcon('icons/qr_code.png'),
                 children: [
                     {
                         label: "Добавить",
-                        onClick: () => createQR(item)
+                        onClick: () => createQR(item),
+                        icon: createIcon('icons/plus.webp')
                     },
                     {
                         label: "Удалить",
-                        onClick: () => deleteQR(item)
+                        onClick: () => deleteQR(item),
+                        icon: createIcon('icons/trash.webp')
+
                     },
                 ],
             },
             {
-                label: "Отмена",
+                label: "Удалить",
-                onClick: () => {
+                icon: createIcon('icons/trash.webp'),
-                    alert('Здесь ещё предстоит написать код')
+                onClick: () => deletePointMap(item),
-                }
             },
         ]
     });
@@ -259,24 +296,27 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <button @click="saveResult">Сохранить</button>
+            <custom-button class="actions__btn">Сохранить</custom-button>
-            <button @click="cleanResult">Очистить</button>
+            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
-            <button @click="cancel">Отменить</button>
+            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu/>
     </div>
 
 
-    <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
+    <MyDialog
-              :is-success=Boolean(listOfTrips.length)>
+        v-model:show="isModalVisible"
+        class="dialogWindow"
+        :is-success=Boolean(listOfTrips.length)
+    >
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
         </template>
-        <template #body>
+        <main>
             <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
             <p v-else>Выстройте маршрут перед сохранением кода.</p>
-        </template>
+        </main>
         <template #footer>
             <div v-if="listOfTrips.length">
                 <button @click="handleDownloadBtn">Скачать код</button>
@@ -290,6 +330,7 @@ function onContextMenu(e, item) {
 <style>
 html {
     background-image: radial-gradient(#383838e2, #222222);
+    font-size: 18px;
 }
 
 :root {
@@ -345,19 +386,16 @@ html {
 }
 
 .actions {
-    margin-left: 10px;
+    margin: 3px 0 0 10px;
+
     display: flex;
     flex-direction: column;
+    gap: 10px;
+    width: 150px;
 }
 
 .actions button {
-    border: 2px solid rgb(251, 251, 251);
+    padding: 20px 35px;
-    padding: 15px 30px;
+    //background-color: red;
-    font-size: 15px;
-    background-color: #383838;
-    color: white;
-    cursor: pointer;
-    margin: 5px;
-    transition: 0.3s;
 }
 </style>

src/components/MyDialog.vue

@@ -1,119 +1,127 @@
 <template>
-  <transition name="modal-fade">
+    <transition name="modal-fade">
-    <div class="modal-backdrop" @click="closeModal">
+        <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
-      <div class="modal" @click.stop>
+            <div class="modal" @click.stop>
-        <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
+                <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
-          <slot name="header">
+                    <slot name="header">
-            <strong>Заголовок по умолчанию</strong>
+                        <strong>Заголовок по умолчанию</strong>
-          </slot>
+                    </slot>
-          <button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+                    <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
-            ×
+                            aria-label="Закрыть модальное окно">
-          </button>
+                        ×
-        </header>
+                    </button>
-        <section class="modal-body">
+                </header>
-          <slot name="body">Тело по умолчанию</slot>
+                <section class="modal-body">
-        </section>
+                    <slot>Тело по умолчанию</slot>
-        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
+                </section>
-          <slot name="footer">
+                <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
-            <button  @click="closeModal">Закрыть</button>
+                    <slot name="footer">
-          </slot>
+                        <button @click.stop="$emit('update:show', false)">Закрыть</button>
-        </footer>
+                    </slot>
-      </div>
+                </footer>
-    </div>
+            </div>
-  </transition>
+        </div>
+    </transition>
 </template>
 
 <script setup>
-const emit = defineEmits(['close'])
 const props = defineProps({
-  isSuccess: {
+    isSuccess: {
-    type: Boolean,
+        type: Boolean,
-    required: true
+        required: true
-  }
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
 })
-function closeModal() {
-    emit('close');
-}
 </script>
 
 <style>
 .modal-backdrop {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  bottom: 0;
+    bottom: 0;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.3);
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
+    z-index: 501;
 }
 
 .modal {
-  background: #2f2f2f;
+    background: #2f2f2f;
-  box-shadow: 2px 2px 20px 1px;
+    box-shadow: 2px 2px 20px 1px;
-  overflow-x: auto;
+    overflow-x: auto;
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  max-width: 500px;
+    max-width: 500px;
-  width: 90%;
+    width: 90%;
-  border-radius: 5px;
+    border-radius: 5px;
 }
 
 .modal-header,
 .modal-footer {
-  padding: 10px;
+    padding: 10px;
-  display: flex;
+    display: flex;
 }
 
 .modal-header {
-  border-bottom: 1px solid #eeeeee;
+    border-bottom: 1px solid #eeeeee;
-  justify-content: space-between;
+    justify-content: space-between;
-}
-.modal-header-success {
-  color: #4AAE9B;
-}
-.modal-header-error {
-  color: red;
 }
 
-.modal-header [type = 'button'] {
+.modal-header-success {
-  color: red;
+    color: #4AAE9B;
-  font-size: 25px;
+}
+
+.modal-header-error {
+    color: red;
+}
+
+.modal-header button {
+    color: red;
+    font-size: 25px;
 }
 
 .modal-footer {
-  justify-content: flex-end;
+    justify-content: flex-end;
-  border-top: 1px solid white;
+    border-top: 1px solid white;
 }
-.modal-footer [type = 'button'] {
+
-  justify-content: flex-end;
+.modal-footer button {
-  border-top: 1px solid white;
+    justify-content: flex-end;
-  padding: 5px;
+    border-top: 1px solid white;
+    padding: 5px;
+    color: white;
 }
-.modal-footer-success [type = 'button'] {
+
-  background-color: #4AAE9B;
+.modal-footer-success button {
-  border: none;
+    background-color: #4AAE9B;
-  margin: 3px;
+    border: none;
+    margin: 3px;
 }
-.modal-footer-error [type = 'button'] {
+
-  background: red;
+.modal-footer-error button {
-  border: none;
+    background: red;
+    border: none;
 }
 
 .modal-body {
-  position: relative;
+    position: relative;
-  padding: 20px 10px;
+    padding: 20px 10px;
-  color: white
+    color: white
 }
 
 .modal-btn-close {
-  border: none;
+    border: none;
-  font-size: 20px;
+    font-size: 20px;
-  padding: 0;
+    padding: 0;
-  cursor: pointer;
+    cursor: pointer;
-  font-weight: bold;
+    font-weight: bold;
-  color: red;
+    color: red;
-  background: transparent;
+    background: transparent;
 }
 </style>   

src/components/MyDropMenu.vue

@@ -1,120 +1,220 @@
 <template>
-  <div class="navigation-wrapper">
+    <div class="navigation-wrapper">
-    <!-- Кнопка Бургер -->
+        <!-- Кнопка Бургер -->
-    <button 
+        <button
-      class="burger-btn" 
+            class="burger-btn"
-      @click="toggleMenu" 
+            @click="toggleMenu"
-      :class="{ 'is-active': isOpen }"
+            :class="{ 'is-active': isOpen }"
-      aria-label="Menu"
+            aria-label="Menu"
-    >
+        >
-      <span class="line"></span>
+            <span class="line"></span>
-      <span class="line"></span>
+            <span class="line"></span>
-      <span class="line"></span>
+            <span class="line"></span>
-    </button>
+        </button>
 
-    <!-- Затемнение заднего фона (Overlay) -->
+        <!-- Затемнение заднего фона (Overlay) -->
-    <transition name="fade">
+        <transition name="fade">
-      <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
+            <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
-    </transition>
+        </transition>
 
-    <!-- Выпадающая панель -->
+        <!-- Выпадающая панель -->
-    <transition name="slide">
+        <transition name="slide">
-      <aside v-if="isOpen" class="side-panel">
+            <aside v-if="isOpen" class="side-panel">
-        <div class="menu-header">
+                <div class="menu-header">
-          <h1>SkyVue</h1>
+                    <h1>SkyVue</h1>
-        </div>
+                </div>
 
-        <nav class="menu-content">
+                <nav class="menu-content">
-          <a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
+                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
-          <slot>
+                </nav>
-            <p class="placeholder">Здесь будут ваши ссылки...</p>
+            </aside>
-          </slot>
+        </transition>
-        </nav>
+        <MyDialog
-      </aside>
+            isSuccess
-    </transition>
+            v-model:show="isModalVisible"
-  </div>
+        >
+            <template #header>
+                <strong>{{ infoCard.title }}</strong>
+            </template>
+            <main>
+                <p>{{ infoCard.body }}</p>
+            </main>
+            <template #footer>
+                <custom-button title="Посмотреть на stepike">Курс</custom-button>
+                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
+                <custom-button>ОК</custom-button>
+            </template>
+        </MyDialog>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
+import MyDialog from "@/components/MyDialog.vue";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const isOpen = ref(false);
+const isModalVisible = ref(false);
+const infoCard = ref({})
 
 const toggleMenu = () => {
-  isOpen.value = !isOpen.value;
+    isOpen.value = !isOpen.value;
 };
 
 const closeMenu = () => {
-  isOpen.value = false;
+    isOpen.value = false;
 };
 
+function openInfoCard(obj) {
+    isModalVisible.value = true
+    infoCard.value = obj
+}
+
+const links = [
+    {
+        title: 'Что такое ROS?',
+        body: 'ROS — переводится как robot operation system',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '2',
+        body: 'Информация для учащихся 2',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '3',
+        body: 'Информация для учащихся 3',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '4',
+        body: 'Информация для учащихся 4',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '5',
+        body: 'Информация для учащихся 5',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '6',
+        body: 'Информация для учащихся 6',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '7',
+        body: 'Информация для учащихся 7',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '8',
+        body: 'Информация для учащихся 8',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '9',
+        body: 'Информация для учащихся 9',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '0',
+        body: 'Информация для учащихся 0',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+]
+
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
+defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
 
 <style scoped>
 .burger-btn {
-  position: fixed; /* Она всегда на одном месте при скролле */
+    position: fixed; /* Она всегда на одном месте при скролле */
-  top: 20px;
+    top: 20px;
-  left: 20px;
+    left: 20px;
-  z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+    z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  justify-content: space-around;
+    justify-content: space-around;
-  width: 40px;      
+    width: 40px;
-  height: 30px;
+    height: 30px;
-  background: rgba(255, 255, 255, 0.508); 
+    background: rgba(255, 255, 255, 0.508);
-  border: 1px solid #383838;    
+    border: 1px solid #383838;
-  cursor: pointer;
+    cursor: pointer;
-  padding: 5px;
+    padding: 5px;
 }
-h1{
+
-  text-align: center;
+h1 {
+    text-align: center;
 }
+
 .line {
-  width: 100%;
+    width: 100%;
-  height: 4px;
+    height: 4px;
-  background-color: #383838; /* Ярко-красный цвет для теста */
+    background-color: #383838; /* Ярко-красный цвет для теста */
-  transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 
 /* Анимация бургера в крестик */
-.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.is-active .line:nth-child(1) {
-.is-active .line:nth-child(2) { opacity: 0; }
+    transform: translateY(6px) rotate(45deg);
-.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+}
+
+.is-active .line:nth-child(2) {
+    opacity: 0;
+}
+
+.is-active .line:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
 
 /* Боковая панель */
 .side-panel {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 300px;
+    width: 300px;
-  height: 100vh;
+    height: 100%;
-  background: white;
+    background: white;
-  z-index: 1000;
+    z-index: 1000;
-  padding: 0 20px 20px;
+    padding: 0 20px 20px;
+    overflow-y: scroll;
 }
 
 /* Затемнение фона */
 .overlay {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 100vw;
+    width: 100vw;
-  height: 100vh;
+    height: 100vh;
-  z-index: 999;
+    z-index: 2;
 }
 
 /* Анимации появления */
-.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
+.slide-enter-active, .slide-leave-active {
-.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+    transition: transform 0.3s ease;
+}
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.slide-enter-from, .slide-leave-to {
-.fade-enter-from, .fade-leave-to { opacity: 0; }
+    transform: translateX(-100%);
+}
 
-.placeholder {
+.fade-enter-active, .fade-leave-active {
-  color: #00e44c; 
+    transition: opacity 0.3s ease;
-  /* цвет текста */
+}
-  font-style: italic;
+
+.fade-enter-from, .fade-leave-to {
+    opacity: 0;
 }
 </style>

src/components/UI/CustomButton.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+    isSuccess: {
+        type: Boolean,
+        required: true
+    },
+    to: {
+        type: String,
+        default: null
+    }
+})
+
+</script>
+
+<template>
+    <a v-if="to" :href="props.to" class="btn">
+        <slot/>
+    </a>
+    <button v-else class="btn">
+        <slot/>
+    </button>
+</template>
+
+<style scoped>
+.btn {
+    border: 2px solid white;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 5px;
+    background-color: #383838;
+    color: white;
+    width: 100%;
+    font-size: 17px;
+}
+</style>

src/shared/copyToclipboard.js

@@ -1,5 +1,5 @@
 import copy from 'copy-to-clipboard';
-import iziToast from '@/iziToast.js';
+import iziToast from '@/shared/iziToast.js';
 
 function copyToclipboard(text) {
     try {

src/shared/izitoast.js

@@ -1,4 +1,4 @@
-import iziToast from "izitoast"
+import iziToast from 'iziToast';
 
 iziToast.settings({
     timeout: 3000,