Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore
This commit is contained in:
2024-09-22 02:42:26 -04:00
parent 3cfb3951e3
commit cd51474d08
36 changed files with 458 additions and 639 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<div class="rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
<div>
<!-- Logo-Name-Followers -->
@@ -9,32 +9,26 @@
<div>
<img
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
: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">{{ creator.name }}</p>
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
</div>
<div class="flex justify-between mt-2">
<subscribe-button :creator="creator"></subscribe-button>
<subscribe-button></subscribe-button>
<div class="flex space-x-2">
<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 iconColorClass="text-white"
></donation-button>
</div>
</div>
@@ -50,9 +44,8 @@
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true}
});
const brandingStore = useBrandingStore()
</script>