67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Book } from "@/models/book";
|
|
import { BookService } from "@/services/book.service";
|
|
import { onMounted, ref } from "vue";
|
|
import BookCard from "@/components/BookCard.vue";
|
|
|
|
const books = ref<Book[]>([]);
|
|
const bookService = new BookService();
|
|
|
|
onMounted(async () => {
|
|
books.value = await bookService.findBooks();
|
|
|
|
books.value.map((book) => {
|
|
book.added_at = new Date(book.added_at);
|
|
});
|
|
books.value.sort((a, b) => {
|
|
if (a.updated_at > b.updated_at) {
|
|
return -1;
|
|
} else if (a.updated_at < b.updated_at) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main class="cards">
|
|
<BookCard v-for="book in books"
|
|
:book="book"
|
|
:key="book.id"
|
|
class="card"/>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2em;
|
|
}
|
|
|
|
.action {
|
|
display: inline-flex;
|
|
margin-top: 1rem;
|
|
color: #ffffff;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 500;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
background-color: #2563EB;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.action span {
|
|
transition: .3s ease;
|
|
}
|
|
|
|
.action:hover span {
|
|
transform: translateX(4px);
|
|
}
|
|
</style>
|