53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<div class="rounded-b-2xl"
|
|
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
|
|
<div>
|
|
|
|
<!-- Logo-Name-Followers -->
|
|
<div class="flex flex-row relative z-20">
|
|
<div>
|
|
<img
|
|
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
|
|
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
|
alt="Profile Picture"
|
|
:style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
|
|
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
|
|
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex justify-between mt-2">
|
|
<subscribe-button></subscribe-button>
|
|
<div class="flex space-x-2">
|
|
<donation-button iconColorClass="text-white"
|
|
></donation-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
|
import DonationButton from "@/views/creators/DonationButton.vue";
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
|
|
const brandingStore = useBrandingStore()
|
|
|
|
</script>
|