Refactor about page and improve icons

src/components/user/AboutTab.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { getSetting } from '@/settingsManager'
+import type { Social } from '@/types';
+import type { PropType } from 'vue';
+
+export default {
+    props: {
+        socials: {
+            type: Object as PropType<Social[]>
+        },
+        about: {
+            type: String
+        }
+    },
+    methods: {
+        getSetting,
+        getIconName(iconType: string) {
+            console.log(iconType)
+            const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
+            if (icons.includes(iconType)) {
+                return "bi-" + iconType
+            } else {
+                return "bi-link-45deg"
+            }
+        }   
+    }
+}
+</script>
+
+<template>
+    <div v-if="getSetting('streamerAboutSectionVisible')" 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">{{ about || "No about provided" }}</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-if="socials" v-for="link in socials" :key="link.url">
+                <a :href="link.url" class="text-white hover:text-gray-400 mr-4 flex">
+                    <v-icon :name="getIconName(link.type)"  class="w-6 h-6 mr-1"></v-icon>
+                    <span>{{ link.name }}</span>
+                </a>
+            </li>
+            <p v-else> No socials provided </p>
+        </ul>
+    </div>
+</template>