Transit

frontend/src/views/creators/ActualBanner.vue

@@ -0,0 +1,65 @@
+<template>
+
+  <div class="relative">
+    <!-- Banner Container with mouse events -->
+    <div
+        class="relative"
+        @mouseenter="showTint = isCurrentCreator"
+        @mouseleave="showTint = false"
+        @click="isCurrentCreator && openBannerEditor()"
+    >
+      <img
+          class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)] h-60"
+          :src="brandingStore.value.images.banner ? brandingStore.value.images.banner : '/images/placeholders/banner.png'"
+          alt="Profile Banner"
+      >
+      <!-- Tint Effect -->
+      <div
+          v-if="showTint"
+          class="absolute 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>
+  </div>
+
+  <v-dialog v-model="isDialogOpen" max-width="800px">
+    <template #default="{ close }">
+      <div class="bg-white rounded-2xl p-4">
+        <banner-editor :creator="brandingStore.value"
+                       @closeRequested="() => isDialogOpen = false"
+        ></banner-editor>
+      </div>
+    </template>
+  </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";
+
+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>