first commit

front/src/BookCard.vue

@@ -0,0 +1,48 @@
+<script setup>
+
+  const props = defineProps({
+  title: String,
+  author: String,
+  imagePath: String,
+  rating: Number
+});
+const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "defaultbook.png" : props.imagePath;
+
+
+</script>
+
+<template>
+  <div class="box container has-background-dark">
+    <div class="media">
+      <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="is-size-4">{{title}}</div>
+        <div class="is-size-5 is-italic">{{author}}</div>
+        <p>{{rating}}/5</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+img {
+  max-height:200px;
+  max-width:200px;
+  height:auto;
+  width:auto;
+}
+
+.box {
+  transition:ease-in-out 0.04s
+}
+
+.box:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+}
+
+</style>