Creator news summary - presentation design

src/views/creators/CreatorPresentation.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :style="{ backgroundColor: '#2D2728' }">
+    <div class="mt-10" v-if="creator && creator.id">
+      <div class="max-w-[1500px] mx-auto">
+        <creator-banner :creator="creator"
+                        @content-posted="contentPosted"
+        ></creator-banner>
+      </div>
+    </div>
+
+    <div v-else>
+      <div v-if="loading">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </div>
+      <div v-else>
+        <v-card>
+          <v-card-text style="text-align: center;">
+            Aucun créateur au nom de {{ route.params.creator }}
+          </v-card-text>
+        </v-card>
+      </div>
+    </div>
+
+    <!--reator presentation-->
+    <div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
+      <div>
+
+        <!-- Actualité feed-->
+        <div class="flex flex-column px-2 max-w-80">
+          <div>
+            <Creatornewssummary :creator="creator"></Creatornewssummary>
+          </div>
+        </div>
+      </div>
+      <div class="min-w-[875px]"></div>
+      <div class="bg-fuchsia-800 flex-grow">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script async setup>
+import {watch, ref, onBeforeMount} from 'vue';
+import {useRoute} from 'vue-router';
+import {useClient} from "@/plugins/api.js";
+import CreatorBanner from "@/views/creators/CreatorBanner.vue";
+import Creatornewssummary from "@/views/creators/banner/Creatornewssummary.vue";
+
+const creator = ref(null)
+const loading = ref(true)
+const contents = ref([])
+
+const client = useClient()
+const route = useRoute()
+
+function contentPosted(content) {
+  contents.value.unshift(content)
+}
+
+onBeforeMount(async () => await fetchCreatorData(route.params.creator))
+
+watch(
+    () => route.params.creator,
+    async () => await fetchCreatorData(route.params.creator)
+)
+
+const fetchCreatorData = async (creatorAlias) => {
+  try {
+    loading.value = true
+    const response = await client.get(`/api/creators/@${creatorAlias}`)
+    creator.value = response.data
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`)
+  } finally {
+    loading.value = false
+  }
+}
+
+</script>