82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Banner Container with mouse events -->
|
|
<div
|
|
class="relative overflow-y-auto rounded-b-2xl"
|
|
@click="isCurrentCreator && openBannerEditor()"
|
|
@mouseenter="showTint = isCurrentCreator"
|
|
@mouseleave="showTint = false"
|
|
>
|
|
<img
|
|
:alt="t('alt')"
|
|
:src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'"
|
|
class="banner aspect-[4/1] w-full object-cover"
|
|
/>
|
|
<!-- Tint Effect -->
|
|
<div
|
|
v-if="showTint"
|
|
class="absolute inset-0 cursor-pointer bg-black/25"
|
|
>
|
|
<!-- Top-right Icon -->
|
|
<div
|
|
class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
|
|
>
|
|
<v-icon
|
|
:icon="mdiPencil"
|
|
large
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<v-dialog
|
|
v-model="isDialogOpen"
|
|
max-width="800px"
|
|
>
|
|
<BannerEditor
|
|
:creator="brandingStore.value"
|
|
@closeRequested="() => (isDialogOpen = false)"
|
|
/>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BannerEditor from '@/views/creators/BannerEditor.vue';
|
|
import { computed, ref } from 'vue';
|
|
import { useBrandingStore } from '@/stores/brandingStore.js';
|
|
import { useAuthStore } from '@/stores/authStore.js';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { mdiPencil } from '@mdi/js';
|
|
|
|
const authStore = useAuthStore();
|
|
const brandingStore = useBrandingStore();
|
|
const { t } = useI18n();
|
|
|
|
// State
|
|
const showTint = ref(false);
|
|
const isDialogOpen = ref(false);
|
|
|
|
// Methods
|
|
const openBannerEditor = () => {
|
|
isDialogOpen.value = true;
|
|
};
|
|
|
|
const isCurrentCreator = computed(() => {
|
|
return authStore.userId === brandingStore.value.id;
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"alt": "Creator banner"
|
|
},
|
|
"fr": {
|
|
"alt": "Bannière du créateur"
|
|
}
|
|
}
|
|
</i18n>
|