29b07b40ba
Move the language button and its logic. Modify the sidebar (add navigation buttons for mobile). Fix the display bug for the Subscription list.
79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<div
|
|
:style="{
|
|
backgroundColor: creator.colors.bannerBottom || '#A30E79',
|
|
borderBottom: `2px solid ${creator.colors.accent || '#000000'}`
|
|
}">
|
|
<div>
|
|
<!-- Logo-Name-Followers-->
|
|
<div class="flex flex-row relative z-20">
|
|
<div>
|
|
<!-- bug space-->
|
|
<!-- <img-->
|
|
<!-- -->
|
|
<!-- class="rounded-full border-solid border-2 -mt-4 max-w-[80px] h-auto ml-2"-->
|
|
<!-- :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
|
|
<!-- alt="Profile Picture"-->
|
|
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
|
|
<!-- />-->
|
|
</div>
|
|
|
|
<div class="flex flex-column text-white capitalize px-2 mt-1">
|
|
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
|
|
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
|
|
</div>
|
|
|
|
<div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
|
|
<div class="mt-1">{{ creator.about.title }}</div>
|
|
<creator-about :creator="creator"></creator-about>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Title-info-donation-->
|
|
<div class="flex flex-row items-center justify-between w-full px-4">
|
|
|
|
<div>
|
|
<subscribe-button :creator="creator"></subscribe-button>
|
|
</div>
|
|
|
|
<div class="flex ml-auto space-x-4">
|
|
<publish-content-button :creator="creator"
|
|
@content-posted="addContent"
|
|
></publish-content-button>
|
|
|
|
<donation-button :color-border="creator.colors.menu"
|
|
:color-accent="creator.colors.accent"
|
|
:creator-id="creator.id"
|
|
:creator-name="creator.name"
|
|
:creator-logo="creator.images.logo"
|
|
iconColorClass="text-white"
|
|
></donation-button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
|
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
|
import DonationButton from "@/views/creators/DonationButton.vue";
|
|
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
|
|
|
const props = defineProps({
|
|
creator: {type: Object, required: true}
|
|
});
|
|
|
|
const emits = defineEmits(['content-posted']);
|
|
|
|
function addContent(content) {
|
|
emits('content-posted', content);
|
|
}
|
|
</script>
|