Обновление страницы профиля пользователя

Seterator/Views/Profile/Index.cshtml

@@ -3,6 +3,7 @@
     ViewData["Title"] = $"{Model.Name ?? Model.Login}";
 }
 
+<div id="profile-component"></div>
 <div class="profile profile_display_grid container">
     <div class="profile__leftSide">
         <div class="avatar avatar_theme_dark">

Seterator/wwwroot/components/Other/ImgText.vue

@@ -0,0 +1,41 @@
+// Компонент представляет собой средство для 
+// отображения иконки рядом с текстом
+// Параметры:
+// img - ссылка на изображение
+// text - отображаемый текст
+// imgColor - цвет иконки
+
+
+<template>
+  <div class="imgTextq" :style="{ fill: imgColor }">
+      <div class="imgTextq__img">
+        <img class="imgSvg" :src="img">
+      </div>
+    <span class="imgTextq__text">{{text}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+props: [
+    'img',
+    'text',
+    'imgColor'
+]
+}
+</script>
+
+<style scoped>
+.imgTextq {
+    display: grid;
+    grid-template-columns: 12px 1fr;
+}
+
+.imgTextq__img {
+    width: 12px;
+}
+
+.imgTextq__text {
+    margin-left: 5px;
+}
+</style>

Seterator/wwwroot/components/Other/SeteratorButton.vue

@@ -0,0 +1,72 @@
+<template>
+    <a  class="seteratorButton" 
+        :href="propHref"
+        :class="'seteratorButton_color_' + propColor"
+    >
+        {{ propText }}
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        propHref: {
+            type: String
+        },
+        propText: {
+            type: String
+        },
+        propColor: {
+            type: String
+        }
+    }
+}
+</script>
+
+<style scoped>
+.seteratorButton {
+    display: block;
+    margin: 0;
+    padding: 15px;
+    width: 100%;
+
+    font-weight: 600;
+    text-align: center;
+    border: 2px solid transparent;
+    border-radius: 40px;
+
+    cursor: pointer;
+}
+
+.seteratorButton_color_white {
+    background-color: rgb(255,255,255);
+    color: rgb(0, 0, 0);
+    border: 2px solid rgb(0, 0, 0);
+    box-sizing: border-box;
+}
+
+.seteratorButton_color_white:hover {
+    background-color: rgb(0, 0, 0);
+    color: rgb(255,255,255) !important;
+}
+
+.seteratorButton_color_orange {
+    background-color: rgb(255, 82, 25);
+    color: rgb(255,255,255) !important;
+}
+
+.seteratorButton_color_orange:hover,
+.seteratorButton_color_orangeShadow:hover {
+    background-color: rgb(204, 66, 20);
+    color: rgb(255,255,255);
+}
+
+.seteratorButton_color_orangeShadow {
+    background-color: rgb(255, 82, 25);
+    color: rgb(255,255,255) !important;
+
+    -webkit-box-shadow: 0px 36px 68px -13px rgba(255,82,25,1);
+    -moz-box-shadow: 0px 36px 68px -13px rgba(255,82,25,1);
+    box-shadow: 0px 36px 68px -13px rgba(255,82,25,1);
+}
+</style>

Seterator/wwwroot/components/Other/SocialIcons.vue

@@ -0,0 +1,56 @@
+<template>
+  <ul class="socialIcons__wrap">
+      <li class="socialIcons__icon" v-for="socialIcon in socialIcons" :key="socialIcon.name">
+          <a :href="socialIcon.href" target="_blank" :style="{ fill: color }"><img class="aqua imgSvg" :src="pickImage(socialIcon.name)"></a>
+      </li>
+  </ul>
+</template>
+
+<script>
+export default {
+    props: [
+        'socialIcons',
+        'color'
+    ],
+    methods: {
+        pickImage(name) {
+            switch (name) {
+                case 'vk':
+                    return '/img/Social icons/Orange/vk.svg';
+                    break;
+                case 'telegram':
+                    return '/img/Social icons/Orange/telegram.svg';
+                    break;
+                case 'facebook':
+                    return '/img/Social icons/Orange/facebook.svg';
+                    break;
+                case 'twitter':
+                    return '/img/Social icons/Orange/twitter.svg';
+                    break;
+                default:
+                    return '/img/icons/web.svg';
+                    break;
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.socialIcons__wrap {
+    margin: 30px 10px 0 10px;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+}
+
+.socialIcons__icon {
+    list-style: none;
+    width: 20px;
+}
+
+.socialIcons__icon:hover {
+    opacity: 50%;
+}
+</style>