119 lines
3.4 KiB
Vue
119 lines
3.4 KiB
Vue
<template>
|
|
<!-- Bannière-->
|
|
<div class="shadow-lg rounded-2xl">
|
|
<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-2xl"
|
|
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
|
|
|
|
<div class="w-full flex justify-center gap-32 max-h-8">
|
|
<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-5 h-5"
|
|
alt="Tiktok">
|
|
<img v-if="socialNetwork.icon.includes('websiteIcon')"
|
|
:src="socialNetwork.icon"
|
|
class="w-5 h-5"
|
|
alt="Website">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>
|
|
<!--Banner-->
|
|
<div class="relative">
|
|
<div>
|
|
<img
|
|
class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
|
|
:src="creator.images.banner ? creator.images.banner : '/images/placeholders/banner.png'"
|
|
alt="Profile Banner"
|
|
style="max-height: 425px"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="h-1.5" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </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> |