Transit

frontend/src/views/creators/NameTitle.vue

@@ -0,0 +1,79 @@
+<template>
+
+  <div class="relative">
+
+    <div class="relative flex flex-row"
+         @mouseenter="showTint = isCurrentCreator"
+         @mouseleave="showTint = false"
+         @click="isCurrentCreator && openBannerEditor()"
+    >
+
+      <div v-show="brandingStore.value.verified"
+           class="text-blue m-4">
+        <icon-account-verified></icon-account-verified>
+      </div>
+
+      <div class="flex flex-col"
+           :style="{ color: brandingStore.colors.onPrimary }">
+      <span class="capitalize text-3xl">
+        {{ brandingStore.value.name }}
+      </span>
+
+        <span class="capitalize text-lg">
+        {{ brandingStore.value.title }}
+      </span>
+      </div>
+
+      <!-- Tint Effect -->
+      <div
+          v-if="showTint"
+          class="absolute inset-0 bg-black/25 cursor-pointer"
+      >
+        <!-- Top-right Icon -->
+        <div
+            class="absolute top-1 right-1 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">
+        <name-title-editor
+            :creator="brandingStore?.value"
+            @closeRequested="() => isDialogOpen = false"
+        ></name-title-editor>
+      </div>
+    </template>
+  </v-dialog>
+
+</template>
+
+<script setup>
+import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {useAuthStore} from "@/stores/authStore.js";
+import {computed, ref} from "vue";
+import NameTitleEditor from "@/views/creators/NameTitleEditor.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>