jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds SVG for all social network icons

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-13 00:22:40 -05:00
parent be06638582
commit d2e5810736
29 changed files with 422 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/views/profile/ProfilePage.vue
View File

@@ -111,49 +111,65 @@
<div class="content">
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-facebook</v-icon></span>
<span class="label">
<facebook class="social-icon"></facebook>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-instagram</v-icon></span>
<span class="label">
<instagram class="social-icon"></instagram>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="label">
<x class="social-icon"></x>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-linkedin</v-icon></span>
<span class="label">
<linkedin class="social-icon"></linkedin>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="label">
<tiktok class="social-icon"></tiktok>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-youtube</v-icon></span>
<span class="label">
<youtube class="social-icon"></youtube>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-reddit</v-icon></span>
<span class="label">
<reddit class="social-icon"></reddit>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-web</v-icon></span>
<span class="label">
<web class="social-icon"></web>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -177,7 +193,14 @@ import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import XIcon from "@/assets/icons/x.svg"
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
import X from "@/views/svg/X.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";
const userProfileStore = useUserProfileStore()
@@ -267,6 +290,10 @@ const closeDialog = () => {
@apply flex-none min-w-32 text-left;
}
.social-icon {
@apply w-6 h-6;
}
.value {
@apply flex-auto text-left pr-6 capitalize;
}