collection -> inspiration

src/App.vue

@@ -4,14 +4,20 @@
 
 <script setup>
 import { useApiStore } from "./stores/api";
+import { useUserStore } from "./stores/user";
 import { ref } from "vue";
 import home from "./views/Home.vue";
 import inspirations from "./views/Inspirations.vue";
+import { storeToRefs } from "pinia";
 
 const components = {
-  home, inspirations
+  home,
+  inspirations,
 };
 
+const { user } = storeToRefs(useUserStore());
+user.value = kirbyData.user;
+
 const data = ref(null);
 const api = useApiStore();
 api.fetchPageData().then((res) => (data.value = res));

src/components/Menu.vue

@@ -73,7 +73,7 @@
           <a href="#">Profil</a>
         </li>
         <li data-icon="logout">
-          <a href="#">Déconnexion</a>
+          <a href="/logout.php">Déconnexion</a>
         </li>
       </ul>
     </footer>

src/components/inspirations/Header.vue

@@ -1,14 +1,14 @@
 <template>
   <header
     class="flex | text-center"
-    :style="'--image: url(\'' + collection.cover + '\');'"
+    :style="'--image: url(\'' + inspiration.cover + '\');'"
   >
     <!-- $inspiration->cover()->url() -->
     <h2
       class="inspiration__title | font-serif | text-lg"
-      :class="{ new: collection.new }"
+      :class="{ new: inspiration.new }"
     >
-      {{ collection.title }}
+      {{ inspiration.title }}
     </h2>
     <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
     <time
@@ -18,7 +18,7 @@
     >
     <!-- $inspiration->date() -->
     <p class="inspiration__description">
-      {{ collection.description }}
+      {{ inspiration.description }}
     </p>
   </header>
 </template>
@@ -27,13 +27,13 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 
-const { collection } = defineProps({
-  collection: Object,
+const { inspiration } = defineProps({
+  inspiration: Object,
 });
 
 dayjs.locale("fr");
 
-const frenchFormattedDate = dayjs(collection.date).format("MMMM YYYY");
+const frenchFormattedDate = dayjs(inspiration.date).format("MMMM YYYY");
 </script>
 
 <style scoped>

src/stores/projects.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { useApiStore } from "./api.js";
 import { ref, computed } from "vue";
+import { useUserStore } from "./user.js";
 
 export const useProjectsStore = defineStore("projects", () => {
   const projects = ref([]);

src/stores/user.js

@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUserStore = defineStore("user", () => {
+  const user = ref(null);
+
+  return { user };
+});

src/views/Inspirations.vue

@@ -19,9 +19,9 @@
 
       <!-- TabPanel -->
       <section class="inspiration">
-        <Header :collection="currentCollection" />
+        <Header :inspiration="currentInspiration" />
         <div class="grid masonry">
-          <template v-for="(item, index) in currentCollection.media">
+          <template v-for="(item, index) in currentInspiration.media">
             <figure class="flex" :style="'--rows: ' + (index % 2 ? 2 : 3)">
               <button
                 class="favorite"
@@ -72,13 +72,15 @@ const tabs = computed(() => {
     {
       label: "Les inspirations",
       id: "all",
-      count: currentCollection.media.length,
+      count: currentInspiration.media.length,
       isActive: true,
     },
   ];
 });
 
-const currentCollection = data.collections[0];
+const currentInspiration = data.inspirations[0];
+
+function toggleFavorite() {}
 </script>
 
 <style scoped>