generated from Flycro/laravel-nuxt
92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
<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-full space-y-4 md:w-4/5">
|
|
<div class="space-y-2">
|
|
<h1 class="font-sans text-3xl font-bold">
|
|
{{ props.book.book_name }}
|
|
</h1>
|
|
<div class="flex flex-col flex-wrap gap-y-2 md:flex-row md:justify-between">
|
|
<div>
|
|
<UBadge>
|
|
{{ props.book.author }}
|
|
</UBadge>
|
|
</div>
|
|
<div class="flex">
|
|
<ClientOnly>
|
|
<NewDeadline v-if="auth.user?.roles.includes('admin')" :book-recommendation-id="props.book.id" />
|
|
</ClientOnly>
|
|
</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>
|