From c2578637a748df9b8b5d6ccc54570b79fbd699af Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 17:12:04 +0300
Subject: [PATCH] add icons footer

---
 components/footer.vue | 13 ++++++++++++-
 components/header.vue |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/footer.vue b/components/footer.vue
index b43d762..2efc357 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -2,6 +2,15 @@
 import k_logo from '@/assets/LOGO.svg'
 import { apiFetch } from '~/utils/apiFetch';
 
+import tg from '@/assets/icons/telegram.svg'
+import vk from '@/assets/icons/vk.svg'
+import yt from '@/assets/icons/youtube.svg'
+const icons = {
+    'simple-icons:vk': vk,
+    'simple-icons:telegram': tg,
+    'simple-icons:youtube': yt,
+}
+
 const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
 const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
@@ -17,7 +26,9 @@ const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`so
             <div class="footer-text footer-text-social" v-if="social_networkData">
                 <template v-for="item in social_networkData">
                     <a :href="item.link" target="_blank">
-                        <Icon :name="item.icon" /> {{ item.name }}
+                        <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                            v-if="icons.hasOwnProperty(item.icon.trim())" />
+                        <Icon :name="item.icon" v-else /> {{ item.name }}
                     </a>
                 </template>
             </div>
diff --git a/components/header.vue b/components/header.vue
index c7ac784..92b19df 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -11,8 +11,8 @@ const route = useRoute()
         <div class="container">
             <div class="logo">
                 <div class="k-logo">
-                    <k_logo />
                     <NuxtLink to="/">
+                        <k_logo />
                         Kupizabor
                     </NuxtLink>
                 </div>