Adds subscriptions

src/views/creators/CreatorBanner.vue

@@ -66,11 +66,8 @@
         <div
             class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
           <AboutYou :creator="creator"></AboutYou>
-          <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>
+
+          <subscribe-button :creator="creator"></subscribe-button>
 
           <CreatePostButton :creator="creator"/>
 
@@ -85,12 +82,12 @@
 import CreatePostButton from "@/views/contents/CreatePostButton.vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
+import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},
 });
 
-
 function GetActiveSocialNetworkUrls() {
 
   const socialNetworks = [];

src/views/creators/SubscribeButton.vue

@@ -0,0 +1,49 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {computed} from "vue";
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+});
+
+const subscriptionStore = useSubscriptionStore()
+
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id))
+
+function subscribeToCreator() {
+  subscriptionStore.subscribeTo(props.creator.id)
+}
+
+function unsubscribeFromCreator() {
+  subscriptionStore.unsubscribeFrom(props.creator.id)
+}
+
+</script>
+
+<template>
+  
+  <template v-if="isSubscribe">
+    <v-btn class="action"
+           @click="subscribeToCreator()"
+           style="transition: background-color 0.3s ease;">
+      S'ABONNER
+    </v-btn>
+  </template>
+  
+  <template v-else>
+    <v-btn class="action"
+           @click="unsubscribeFromCreator()"
+           style="transition: background-color 0.3s ease;">
+      SE DESABONNER
+    </v-btn>
+  </template>
+  
+</template>
+
+<style scoped>
+
+.action {
+  @apply py-2 px-4 rounded bg-gray-100 hover:bg-gray-300
+}
+
+</style>

src/views/creators/SubscriptionList.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+
+const subscriptionStore = useSubscriptionStore()
+</script>
+
+<template>
+
+  <template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
+    <template v-for="subscription in subscriptionStore.subscriptions">
+
+      <RouterLink :to="`/@${subscription.creatorName}`">
+
+        <div class="flex items-center content-center font-sans font-semibold pt-2">
+          <img :src="subscription.creatorPortraitUrl"
+               alt="Profile Image"
+               class="rounded-full mx-2"
+               width="32px"
+               height="32px">
+
+          {{ subscription.creatorName }}
+        </div>
+
+      </RouterLink>
+
+    </template>
+  </template>
+
+  <template v-else>
+    <slot>
+      <span>Placeholder when there are no subscriptions</span>
+    </slot>
+  </template>
+
+</template>