85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import type {Book} from "@/services/models/book";
|
||
|
||
defineProps<{ book: Book }>()
|
||
</script>
|
||
|
||
<template>
|
||
<v-card
|
||
width="100%"
|
||
hover
|
||
height="120px"
|
||
rounded="lg"
|
||
color="white"
|
||
:to="`book/${book.id}`"
|
||
>
|
||
<div class="d-flex ga-1">
|
||
<v-avatar
|
||
rounded="lg"
|
||
size="120"
|
||
>
|
||
<v-img
|
||
:src="book.image_url ?? `https://cdn.vuetifyjs.com/images/cards/sunshine.jpg`"
|
||
/>
|
||
</v-avatar>
|
||
<div class="book-information">
|
||
<div class="book-author-title ">
|
||
<p
|
||
v-if="book.product_title"
|
||
class="text-primary font-weight-bold"
|
||
>
|
||
{{ book.product_title }}
|
||
</p>
|
||
<p
|
||
v-if="book.author"
|
||
class="text-secondary font-weight-medium text-capitalize"
|
||
>
|
||
{{ book.author.split("_").join(" ") }}
|
||
</p>
|
||
</div>
|
||
<v-chip-group
|
||
variant="flat"
|
||
column
|
||
>
|
||
<v-chip
|
||
class="ma-2"
|
||
label
|
||
size="x-small"
|
||
>🗓️
|
||
{{ book.date_de_parution }}
|
||
</v-chip>
|
||
<v-chip
|
||
class="ma-2"
|
||
label
|
||
size="x-small"
|
||
>
|
||
📚 {{ book.nb_de_pages }} pages
|
||
</v-chip>
|
||
</v-chip-group>
|
||
</div>
|
||
</div>
|
||
</v-card>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.book-information {
|
||
max-height: 120px;
|
||
}
|
||
|
||
.book-author-title {
|
||
padding: 4px 4px 0 4px;
|
||
|
||
> * {
|
||
padding: 0 2px;
|
||
font-size: 16px;
|
||
text-wrap: wrap;
|
||
line-height: 1em;
|
||
max-height: 2em;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
</style>
|