Use usual book widget for collection form view

front/src/CollectionForm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { getCollection } from './api.js'
-import CollectionFormBookItem from './CollectionFormBookItem.vue'
+import BookListElement from './BookListElement.vue'
 import AddBookToCollection from './AddBookToCollection.vue'
 import Pagination from './Pagination.vue'
 
@@ -43,7 +43,7 @@ function fetchCollection() {
     <h2 class="title">{{ data.name }}</h2>
     <AddBookToCollection :collection-id="props.id" @created="fetchCollection" />
     <div>
-      <CollectionFormBookItem v-for="book in data.books" :key="book.id" v-bind="book" />
+      <BookListElement v-for="book in data.books" :key="book.id" v-bind="book" />
     </div>
     <Pagination
       class="mt-5"

front/src/CollectionFormBookItem.vue

@@ -1,37 +0,0 @@
-<script setup>
-import { getImagePathOrDefault } from './api.js'
-import { computed } from 'vue'
-
-const props = defineProps({
-  title: String,
-  coverPath: String,
-})
-const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath))
-</script>
-
-<template>
-  <div class="bookcontainer has-background-dark p-2 m-2">
-    <img class="mr-2" v-bind:src="imagePathOrDefault" v-bind:alt="title" />
-    <h3 class="centered subtitle">{{ title }}</h3>
-  </div>
-</template>
-
-<style>
-img {
-  max-height: 200px;
-  max-width: 200px;
-  height: auto;
-  width: auto;
-}
-
-.bookcontainer {
-  display: flex;
-  transition: ease-in-out 0.04s;
-  border-radius: 20px;
-}
-
-.bookcontainer:hover {
-  transform: scale(1.01);
-  transition: ease-in-out 0.02s;
-}
-</style>