Add buttons on book form

front/src/BigIcon.vue

@@ -0,0 +1,58 @@
+<script setup>
+  import { ref, computed } from 'vue'
+
+  const props = defineProps({
+  icon: String,
+  legend: String
+});
+
+  const hovered = ref(false)
+
+  const computedIcon = computed(() => props.icon + (hovered.value ? "Fill" : ""));
+</script>
+
+<template>
+  <div class="bigiconandlegend"
+       @mouseover="hovered = true"
+       @mouseout="hovered = false"
+       >
+    <span class="bigicon" :title="props.legend">
+      <component :is="computedIcon"></component>
+    </span>
+    <div class="bigiconlegend">{{props.legend}}</div>
+  </div>
+</template>
+
+<style scoped>
+
+.bigiconandlegend {
+  border-radius:30px;
+  margin:25px;
+}
+
+.bigiconandlegend:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+  background-color: bulma-primary;
+  cursor: pointer;
+}
+
+.bigicon {
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height: 90px;
+  width: 200px;
+  font-size: 78px;
+  padding-top:20px;
+}
+
+.bigiconlegend {
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-size: 34px;
+  width: 200px;
+  padding-bottom:30px;
+}
+</style>