Refactor about page and improve icons

src/views/ClipView.vue

@@ -7,6 +7,7 @@ import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -71,7 +72,8 @@ export default {
     TwitchChat,
     ErrorMessage,
     FollowButton,
-    LoadingScreen
+    LoadingScreen,
+    AboutTab
   },
   methods: {
     truncate,
@@ -131,24 +133,7 @@ export default {
       </div>
 
       <!-- ABOUT TAB -->
-      <div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
-        <div class="inline-flex w-full">
-          <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.streamer.about }}</p>
-
-        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
-
-        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-          <li v-for="link in data.streamer.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>     
     </div>
 
     <!--