Use the same widget for books everywhere

front/src/BookCard.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { getImagePathOrDefault } from './api.js'
-import { VRating } from 'vuetify/components/VRating'
-
-const props = defineProps({
-  id: Number,
-  title: String,
-  author: String,
-  coverPath: String,
-  rating: Number,
-  read: Boolean,
-})
-const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath))
-const router = useRouter()
-
-function openBook() {
-  router.push(`/book/${props.id}`)
-}
-</script>
-
-<template>
-  <div class="box container has-background-dark">
-    <div class="media" @click="openBook">
-      <div class="media-left">
-        <figure class="image mb-3">
-          <img v-bind:src="imagePathOrDefault" v-bind:alt="title" />
-        </figure>
-      </div>
-      <div class="media-content">
-        <div class="content">
-          <div class="is-size-5">{{ title }}</div>
-          <div class="is-size-5 is-italic">{{ author }}</div>
-          <VRating
-            v-if="rating > 0"
-            half-increments
-            readonly
-            :length="5"
-            size="medium"
-            :model-value="rating / 2"
-            active-color="bulma-body-color"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-img {
-  max-height: 100px;
-  max-width: 100px;
-  height: auto;
-  width: auto;
-}
-
-.box {
-  transition: ease-in-out 0.04s;
-  margin-bottom: 15px;
-}
-
-.box:hover {
-  transform: scale(1.01);
-  transition: ease-in-out 0.02s;
-}
-</style>

front/src/BooksBrowser.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
-import BookCard from './BookCard.vue'
 import { getMyBooks } from './api.js'
+import BookListElement from './BookListElement.vue'
 import Pagination from './Pagination.vue'
 
 const FilterStates = Object.freeze({
@@ -10,7 +10,7 @@ const FilterStates = Object.freeze({
   READING: 'reading',
 })
 
-const limit = 6
+const limit = 5
 const pageNumber = ref(1)
 
 const offset = computed(() => (pageNumber.value - 1) * limit)
@@ -76,7 +76,7 @@ function pageChange(newPageNumber) {
   <div v-else-if="data">
     <div class="">
       <div class="" v-for="book in data.books" :key="book.id">
-        <BookCard v-bind="book" />
+        <BookListElement v-bind="book" />
       </div>
     </div>
     <Pagination