Transit

frontend/src/views/creators/CreatorLogo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="rounded-full relative bg-red"
+       @mouseenter="showTint = isCurrentCreator"
+       @mouseleave="showTint = false"
+       @click="isCurrentCreator && openBannerEditor()"
+  >
+
+    <img
+        class="shadow-2xl rounded-full border-solid border-102 max-w-[190px]"
+        :src="brandingStore.value.images.logo
+            ? brandingStore.value.images.logo
+            : '/images/placeholders/logo.png'"
+        alt="Profile Picture"
+        :style="{
+            borderColor: brandingStore.colors.secondary,
+            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>