Banner + profilePicture + mapped socialNetworks url into the creator.vue

src/views/main/Creator.vue

@@ -1,49 +1,63 @@
 <template>
-  <div>
+  <div v-if="user">
-    
+    <CreatorBanner
-  <div class="flex flex-column w-max-[100] ">
+        :user="user"
-    
+    ></CreatorBanner>
-  </div>
+    <div>
-
+      
-
+    <div class="flex flex-column w-max-[100] ">
-<!--    <div class="w-full border-b-2 p-6">-->
+      
-<!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
+    </div>
-<!--    </div>-->
+  
-<!--    -->
+  
-<!--    <div class="w-full border-b-2 p-6">-->
+  <!--    <div class="w-full border-b-2 p-6">-->
-<!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
+  <!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
-<!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
+  <!--    </div>-->
-<!--    </div>-->
+  <!--    -->
-
+  <!--    <div class="w-full border-b-2 p-6">-->
-    <PostContentMenu></PostContentMenu>
+  <!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
-
+  <!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
-
+  <!--    </div>-->
-    <div class="flex flex-col items-center">
+  
-      <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
+      <PostContentMenu></PostContentMenu>
-        <PostCard v-for="post in posts"
+  
-                  :key="post.id"
+  
-                  :post="post"
+      <div class="flex flex-col items-center">
-                  class=" bg-white w-full content-center rounded-3xl mt-2">
+        <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
-        </PostCard>
+          <PostCard v-for="post in posts"
-      </div>
+                    :key="post.id"
+                    :post="post"
+                    class=" bg-white w-full content-center rounded-3xl mt-2">
+          </PostCard>
+        </div>
+      </div>
+      
     </div>
-
-    
-    
-    
-   
   </div>
 </template>
 
-<script setup>
+<script async setup>
 
 import PostContentMenu from '@/views/main/PostContentMenu.vue'
 import PostCard from "@/views/main/PostCard.vue"
 import posts from "@/views/main/posts.json"
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
+import {onBeforeMount, ref} from "vue";
+import {useClient} from "@/plugins/api.js";
+import {useRoute} from "vue-router";
+import CreatorBanner from "@/views/main/CreatorBanner.vue";
 
-let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+const client = useClient();
+const route = useRoute();
+
+const user = ref(null);
+
+onBeforeMount(async() => {
+  const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
+  user.value = response.data
+  console.log(response.data);
+})
 
 </script>
 

src/views/main/CreatorBanner.vue

@@ -0,0 +1,111 @@
+<template>
+  <!--  Bannière-->
+  <div class="relative bottom-4  z-20 m">
+    <div class="relative flex flex-col">
+      <!-- Social Network-->
+      <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
+        <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
+          <div class="text-lg">1000+ Abonnés</div>
+          <div class="text-sm">500 Contacts en commun</div>
+        </div>
+        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
+          <a 
+              v-for="socialNetwork in GetActiveSocialNetworkUrls()" 
+              :href="socialNetwork.url" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+            <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
+            <img v-if="socialNetwork.icon.includes('tiktok')" src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
+          </a>
+        </div>
+      </div>
+
+
+    </div>
+    <!--Banner & user info-->
+    <div class="relative">
+      <!--Banner-->
+      <div>
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="user.storedDataUrls.bannerPictureUrl" alt="Profile Banner" style="max-height: 550px">
+      </div>
+      <!--User info -->
+      <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
+        <div class="text-white">
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> {{ user.firstName}}</div>
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> {{ user.lastName }}</div>
+          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl"> {{ user.occupation }} </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Actions Button & image profile -->
+  <div class="relative bottom-4 w-full">
+    <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
+      <div class="flex flex-col sm:flex-row items-center sm:justify-between">
+        <img
+            class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
+            :src="user.storedDataUrls.profilePictureUrl"
+            alt="Profile Picture"
+            style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
+        <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
+              @click="isDialogActive = true">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+          </button>
+          <button class="text-white py-2 px-4 rounded"
+                  style="background-color: #333; transition: background-color 0.3s ease;"
+                  onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
+            S'ABONNER
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup>
+
+import {defineProps, ref} from "vue";
+
+const props = defineProps({
+  user: { type: Object, required: true },
+});
+
+const isDialogActive = ref(false);
+
+function GetActiveSocialNetworkUrls(){
+  const socialNetworks = [];
+  const userSocialNetworks = props.user.socialNetworks;
+  if (userSocialNetworks.facebookUrl !== ''){
+    socialNetworks.push({icon: "mdi-facebook", url: props.user.socialNetworks.facebookUrl})
+  }
+  if (userSocialNetworks.facebookUrl !== ''){
+    socialNetworks.push({icon: "mdi-twitter", url: props.user.socialNetworks.xUrl})
+  }
+  if (userSocialNetworks.instagramUrl !== ''){
+    socialNetworks.push({icon: "mdi-instagram", url: props.user.socialNetworks.instagramUrl})
+  }
+  if (userSocialNetworks.tiktokUrl !== ''){
+    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.user.socialNetworks.tikTokUrl})
+  }
+  if (userSocialNetworks.youtubeUrl !== ''){
+    socialNetworks.push({icon: "mdi-youtube", url: props.user.socialNetworks.youtubeUrl})
+  }
+  if (userSocialNetworks.yourWebsiteUrl !== ''){
+    socialNetworks.push({icon: "mdi-web", url: props.user.socialNetworks.yourWebsiteUrl})
+  }
+  
+  return socialNetworks;
+}
+    
+</script>

src/views/main/Header.vue

@@ -74,7 +74,7 @@
 
             <div v-if="currentUser.userName !== 'Anonyme'">
               <v-list-item class="nav-button">
-                <router-link :to="`/${currentUserName}`">
+                <router-link :to="`/@${currentUserName}`">
                   <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
                 </router-link>
               </v-list-item>