120 lines
4.9 KiB
Vue
120 lines
4.9 KiB
Vue
<template>
|
|
<size-indicator></size-indicator>
|
|
|
|
<!-- Bannière-->
|
|
<div class="relative bottom-4 z-20 m">
|
|
<div class="relative flex flex-col">
|
|
<!-- Social Network-->
|
|
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
|
|
:style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
|
|
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
|
|
<a
|
|
v-for="socialNetwork in GetActiveSocialNetworkUrls()"
|
|
: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 & user info-->
|
|
<div class="relative">
|
|
<!--Banner-->
|
|
<div>
|
|
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
|
|
:src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'"
|
|
alt="Profile Banner" style="max-height: 550px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions Button & image profile -->
|
|
<div class="relative bottom-4 w-full">
|
|
<div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
|
|
:style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
|
|
<div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
|
|
<!-- Profile Image Wrapper -->
|
|
<div class="relative flex justify-center lg:w-auto lg:justify-start">
|
|
<!-- Profile Image -->
|
|
<div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
|
|
<img
|
|
class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
|
|
:src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
|
|
alt="Profile Picture"
|
|
:style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Info -->
|
|
<div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
|
|
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24">
|
|
<p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }} {{ creator.lastName }}</p>
|
|
</div>
|
|
<div class="text-2xl text-center lg:text-left">
|
|
<p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
|
|
</div>
|
|
<div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div
|
|
class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
|
|
<AboutYou :creator="creator"></AboutYou>
|
|
|
|
<subscribe-button :creator="creator"></subscribe-button>
|
|
|
|
<publish-content-button :creator="creator"/>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
|
|
import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
|
|
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
|
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
|
|
|
const props = defineProps({
|
|
creator: {type: Object, required: true},
|
|
});
|
|
|
|
function GetActiveSocialNetworkUrls() {
|
|
|
|
const socialNetworks = [];
|
|
const userSocialNetworks = props.creator.socialNetworks;
|
|
if (userSocialNetworks.facebookUrl !== null) {
|
|
socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
|
|
}
|
|
if (userSocialNetworks.xUrl !== null) {
|
|
socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
|
|
}
|
|
if (userSocialNetworks.instagramUrl !== null) {
|
|
socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
|
|
}
|
|
if (userSocialNetworks.tikTokUrl !== null) {
|
|
socialNetworks.push({
|
|
icon: '/images/externals/tiktok-white.png',
|
|
url: props.creator.socialNetworks.tikTokUrl
|
|
})
|
|
}
|
|
if (userSocialNetworks.youtubeUrl !== null) {
|
|
socialNetworks.push({icon: 'mdi-youtube', url: props.creator.socialNetworks.youtubeUrl})
|
|
}
|
|
if (userSocialNetworks.websiteUrl !== null) {
|
|
socialNetworks.push({icon: 'mdi-web', url: props.creator.socialNetworks.websiteUrl})
|
|
}
|
|
|
|
return socialNetworks;
|
|
}
|
|
|
|
</script> |