Second commit

added few test, first api to add book

front/src/BooksBrowser.vue

@@ -1,72 +1,38 @@
 <script setup>
 import BookCard from './BookCard.vue';
-import { useFetch } from './fetch.js'
+import { getBooks } from './api.js'
 
-const { data, error } = useFetch('http://localhost:8080/books');
+const { data, error } = getBooks();
 
-console.log(data.value);
-
-let books = [];
-const dumas = {
-  id: 1,
-  title: "Le Comte de Monte-Cristo",
-  author: "Alexandre Dumas",
-  imagePath: "./comtemontecristo.png",
-  rating: 4.5
-};
-const celine = {
-  id: 2,
-  title: "Guerre",
-  author: "Céline",
-  imagePath: "",
-  rating: 5
-}
-const proust = {
-  id: 3,
-  title: "La Prisonnière",
-  author: "Marcel Proust",
-  imagePath: "",
-  rating: 5
-}
-const proust2 = {
-  id: 4,
-  title: "Du côté de chez Swann",
-  author: "Marcel Proust",
-  imagePath: "",
-  rating: 5
-}
-const balzac = {
-  id: 5,
-  title: "Splendeurs et misères des courtisanes",
-  author: "Balzac",
-  imagePath: "",
-  rating: 3
-}
-const cervantes = {
-  id: 6,
-  title: "L’Ingénieux Hidalgo Don Quichotte de la Manche ou L'Ingénieux Noble Don Quichotte de la Manche",
-  author: "Cervantès",
-  imagePath: "",
-  rating: 3
-}
-
-books.push(dumas);
-books.push(celine);
-books.push(proust);
-books.push(proust2);
-books.push(balzac);
-books.push(cervantes);
 </script>
 
 <template>
-  <div class="grid">
+  <div class="books">
 
     <div v-if="error">Error when loading books: {{ error.message }}</div>
-    <div class="cell" v-else-if="data" v-for="book in data" :key="book.id">
+    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
       <BookCard v-bind="book" />
     </div>
   <div v-else>Loading...</div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+.books {
+	position:relative;
+	float:left;
+	width:100%; height:auto;
+	padding-bottom: 100px;
+  line-height: 2.5;
+
+  column-count: 4;
+  column-gap: 15px;
+}
+
+#book {
+  width: 100% !important;
+  height: auto !important;
+  transition: ease-in-out 0.15s;
+}
+</style>