first commit

front/src/BooksBrowser.vue

@@ -0,0 +1,72 @@
+<script setup>
+import BookCard from './BookCard.vue';
+import { useFetch } from './fetch.js'
+
+const { data, error } = useFetch('http://localhost:8080/books');
+
+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 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">
+      <BookCard v-bind="book" />
+    </div>
+  <div v-else>Loading...</div>
+  </div>
+</template>
+
+<style scoped></style>