67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div class="rounded-full relative"
|
|
@mouseenter="showTint = isCurrentCreator"
|
|
@mouseleave="showTint = false"
|
|
@click="isCurrentCreator && openBannerEditor()"
|
|
>
|
|
|
|
<img
|
|
class="shadow-2xl rounded-full border-solid border-hSecondary border-102 max-w-[190px]"
|
|
:src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
|
|
alt="Profile Picture"
|
|
:style="{
|
|
height: '190px'
|
|
}"
|
|
/>
|
|
|
|
<!-- Tint Effect -->
|
|
<div
|
|
v-if="showTint"
|
|
class="absolute rounded-full inset-0 bg-black/25 cursor-pointer"
|
|
>
|
|
<!-- Top-right Icon -->
|
|
<div
|
|
class="absolute top-4 right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg"
|
|
>
|
|
<v-icon large>mdi-pencil</v-icon>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<v-dialog v-model="isDialogOpen" max-width="800px">
|
|
<template #default="{ close }">
|
|
<div class="bg-white rounded-2xl p-4">
|
|
<creator-logo-editor
|
|
:creator="brandingStore?.value"
|
|
@closeRequested="() => isDialogOpen = false"
|
|
></creator-logo-editor>
|
|
</div>
|
|
</template>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useAuthStore} from "@/stores/authStore.js";
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
import CreatorLogoEditor from "@/views/creators/CreatorLogoEditor.vue";
|
|
import {computed, ref} from "vue";
|
|
|
|
const authStore = useAuthStore();
|
|
const brandingStore = useBrandingStore();
|
|
|
|
// 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> |