feat: Dashboard Functionality

nuxt/components/dashboard/BookInfoCard.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import DeadlineTable from '~/components/deadline/DeadlineTable.vue'
+import NewDeadline from '~/components/modal/NewDeadline.vue'
+
+const props = defineProps<{
+  book: BookRecommendation
+}>()
+
+const auth = useAuthStore()
+const { $storage } = useNuxtApp()
+const dayjs = useDayjs()
+</script>
+
+<template>
+  <UCard class="my-4">
+    <div class="flex w-full justify-between md:space-x-8 lg:space-x-4">
+      <div class="hidden w-1/5 md:block">
+        <img :src="$storage(props.book.cover_image)" :alt="props.book.book_name" class="rounded-lg">
+      </div>
+      <div class="w-4/5 space-y-4">
+        <div class="space-y-2">
+          <h1 class="font-sans text-3xl font-bold">
+            {{ props.book.book_name }}
+          </h1>
+          <div class="flex justify-between">
+            <div>
+              <UBadge>
+                {{ props.book.author }}
+              </UBadge>
+            </div>
+            <div class="flex">
+              <NewDeadline v-if="auth.user?.roles.includes('admin')" :book-recommendation-id="props.book.id" />
+            </div>
+          </div>
+        </div>
+        <UDivider />
+        <div class="space-y-2">
+          <p class="font-sans text-xl font-bold ">
+            Beschreibung
+          </p>
+          <p class="w-full text-lg md:w-3/5">
+            {{ props.book.description }}
+          </p>
+        </div>
+        <div class="flex flex-col flex-wrap justify-start gap-x-32 gap-y-4 pt-4 md:flex-row">
+          <div>
+            <p class="font-sans text-lg font-bold ">
+              Seiten
+            </p>
+            <p class="text-lg">
+              {{ props.book.pages }}
+            </p>
+          </div>
+          <div>
+            <p class="font-sans text-lg font-bold">
+              Erstveröffentlichung
+            </p>
+            <p class="text-lg">
+              {{ dayjs(props.book.published_at).format('MMM YYYY') }}
+            </p>
+          </div>
+          <div>
+            <p class="font-sans text-lg font-bold">
+              Empfohlen von
+            </p>
+            <p class="text-lg">
+              {{ props.book.recommender.name }}
+            </p>
+          </div>
+          <div>
+            <p class="font-sans text-lg font-bold">
+              Votes
+            </p>
+            <p class="text-lg">
+              {{ props.book.votes.length }}
+            </p>
+          </div>
+        </div>
+        <div>
+          <DeadlineTable :book-recommendation-id="props.book.id" />
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>