115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
<template>
|
|
<!-- Bannière-->
|
|
<div>
|
|
<div class="relative z-20 -mt-2 md:mt-2">
|
|
<div>
|
|
<!-- Social Network UpperPart-->
|
|
<div class="py-4 px-4 min-h-14 md:rounded-t-none md:rounded-t-2xl"
|
|
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
|
|
|
|
<div class="w-full flex justify-end gap-14 ">
|
|
<a
|
|
v-for="socialNetwork in GetSocialsUrls()"
|
|
:href="socialNetwork.url"
|
|
target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
|
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
|
|
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
|
|
alt="Tiktok">
|
|
<img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
|
|
alt="Website">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Banner -->
|
|
<div class="relative">
|
|
<!--Banner-->
|
|
<div>
|
|
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
|
|
:src="creator.images.banner"
|
|
alt="Profile Banner" style="max-height: 425px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--actions - Lowerpart-->
|
|
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
|
|
|
|
const props = defineProps({
|
|
creator: {type: Object, required: true},
|
|
});
|
|
|
|
const emits = defineEmits(['content-posted'])
|
|
|
|
function addContent(content) {
|
|
emits('content-posted', content)
|
|
}
|
|
|
|
function GetSocialsUrls() {
|
|
|
|
const socials = [];
|
|
|
|
if (props.creator.socials.facebookUrl !== null) {
|
|
socials.push({
|
|
icon: "mdi-facebook",
|
|
url: props.creator.socials.facebookUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.instagramUrl !== null) {
|
|
socials.push({
|
|
icon: "mdi-instagram",
|
|
url: props.creator.socials.instagramUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.xUrl !== null) {
|
|
socials.push({
|
|
icon: "mdi-twitter",
|
|
url: props.creator.socials.xUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.linkedInUrl !== null) {
|
|
socials.push({
|
|
icon: 'mdi-linkedin',
|
|
url: props.creator.socials.linkedInUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.tikTokUrl !== null) {
|
|
socials.push({
|
|
icon: '/images/socials/tiktok-white.png',
|
|
url: props.creator.socials.tikTokUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.youtubeUrl !== null) {
|
|
socials.push({
|
|
icon: 'mdi-youtube',
|
|
url: props.creator.socials.youtubeUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.redditUrl !== null) {
|
|
socials.push({
|
|
icon: 'mdi-reddit',
|
|
url: props.creator.socials.redditUrl
|
|
})
|
|
}
|
|
if (props.creator.socials.websiteUrl !== null) {
|
|
socials.push({
|
|
icon: 'mdi-web',
|
|
url: props.creator.socials.websiteUrl
|
|
})
|
|
}
|
|
|
|
return socials;
|
|
}
|
|
|
|
</script> |