Add content creation

src/views/creators/Creator.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+
+    <v-img cover
+           max-height="375"
+           :src="creator?.portrait_url">
+    </v-img>
+
+    <div class="w-full p-6">
+<!--            <ContentList :creator-id="creator?.id">-->
+                  <ContentList creator-id="00000001-0000-0000-0000-000000000001">
+            </ContentList>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+import {onMounted, watch, ref, computed} from 'vue';
+import {useRoute} from 'vue-router';
+import {useClient} from "@/plugins/api.js";
+import ContentList from "@/views/contents/ContentList.vue";
+
+const creator = ref()
+
+const route = useRoute();
+const creatorAlias = computed(() => {
+  return route.params.creator;
+})
+
+console.log(`Opening ${creatorAlias.value} creator page`)
+
+const client = useClient();
+const fetchCreatorData = async (creatorAlias) => {
+  try {
+    const response = await client.get(`/api/creators/@${creatorAlias}`)
+    creator.value = response.data
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`)
+  }
+}
+
+onMounted(() => {
+  fetchCreatorData(creatorAlias.value);
+});
+
+watch(creatorAlias, (newCreatorAlias) => {
+  fetchCreatorData(newCreatorAlias);
+});
+
+</script>   

src/views/creators/CreatorCard.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
+    <v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
+    <v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
+    <v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
+    <v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  creator: {
+    type: Object,
+    required: true,
+    validator: (profile) => {
+      return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
+    }
+  }
+});
+</script>

src/views/creators/CreatorList.vue

@@ -0,0 +1,33 @@
+<template>
+
+  <div>
+
+    <v-img max-height="375"
+           src="images/usersmedia/HutopyProfile/banners/banner01.png"
+           cover>
+    </v-img>
+
+    <div class="text-5xl font-semibold text-center py-10">
+      CRÉATEURS
+    </div>
+
+    <div class="grid grid-cols-2">
+      <RouterLink v-for="(creator, index) in creators"
+                  :key="index"
+                  :to="creator.routerLink">
+        <CreatorCard :creator="creator"
+                     class="m-2">
+        </CreatorCard>
+      </RouterLink>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import CreatorCard from "@/views/creators/CreatorCard.vue";
+import creators from "@/views/creators/creators.json";
+
+</script>

src/views/creators/creators.json

@@ -0,0 +1,51 @@
+[
+  {
+    "ìd": 1,
+    "name": "Hutopy",
+    "title": "Page officielle",
+    "description": "Site officiel pour Hutopy. Venez-nous-y retrouver avec tous vos fans!",
+    "imageUrl": "/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png",
+    "routerLink": "@hutopy",
+    "about": "Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur.",
+    "contacts": {
+      "twitter": "https://twitter.com/Hutopyinc",
+      "facebook": "https://www.facebook.com/Hutopy",
+      "instagram": "https://www.instagram.com/hutopy.inc/"
+    }
+  },
+  {
+    "id": 2,
+    "name": "L'effet",
+    "description": "Fondation",
+    "imageUrl": "/images/usersmedia/leffet/profilepictures/leffetProfile01.png",
+    "routerLink": "@leffet"
+  },
+  {
+    "id": 3,
+    "name": "Guillaume M",
+    "description": "Créateur de contenus",
+    "imageUrl": "/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png",
+    "routerLink": "@guillaumeaime"
+  },
+  {
+    "id": 4,
+    "name": "Chloé Beaugrand",
+    "description": "Spécialiste en médias sociaux",
+    "imageUrl": "/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png",
+    "routerLink": "@chloebeaugrand"
+  },
+  {
+    "id": 5,
+    "name": "Mathieu Caron",
+    "description": "Entrevue Atypique",
+    "imageUrl": "/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png",
+    "routerLink": "@mathieuCaron"
+  },
+  {
+    "id": 6,
+    "name": "ARPS",
+    "description": "Agence créative",
+    "imageUrl": "/images/usersmedia/ARPS/profilepictures/profileARPS.png",
+    "routerLink": "@ARPS"
+  }
+]