simple card

.gitignore

@@ -28,3 +28,5 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+
+.env

src/components/Home.vue

@@ -3,21 +3,88 @@ import type { Book } from "@/models/book";
 import { BookService } from "@/services/book.service";
 import { onMounted, ref } from "vue";
 
-const books = ref<Book[]>([])
+const API_URL = import.meta.env.VITE_MBL_API_URL
+const books = ref<Book[]>([]);
 
 const bookService = new BookService();
 
 onMounted(async () => {
-  books.value = await bookService.findBooks()
+  books.value = await bookService.findBooks();
 });
 </script>
 
 <template>
-  <pre></pre>
+  <div v-for="book in books" class="card">
-  <div v-for="book in books">
+    <img :src="API_URL + '/' + book.illustration" class="image"></img>
-    {{ book.title }}
+    <div class="content">
-  </div>
+      <a href="#">
+        <span class="title">{{ book.title }}</span>
+      </a>
 
+      <p class="desc">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
+        pariatur animi temporibus nesciunt praesentium
+      </p>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.card {
+  max-width: 300px;
+  border-radius: 0.5rem;
+  background-color: light-dark(#efedea, #282828);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid transparent;
+}
+
+.card a {
+  text-decoration: none
+}
+
+.content {
+  padding: 1.1rem;
+}
+
+.image {
+  object-fit: cover;
+  width: 100%;
+  height: 150px;
+}
+
+.title {
+  color: light-dark(#121212, #efefec);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.desc {
+  margin-top: 0.5rem;
+  color: light-dark(#6B7280, #b4b4b1);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.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>

src/models/book.ts

@@ -4,6 +4,7 @@ export class Book {
     note: number = 0
     title: string = ""
     author: string = ""
+    illustration: string = ""
     state: 'PLAN' | 'READING' | 'COMPLETED' | 'DROPPED'  = 'PLAN'
     added_at: Date = new Date()
     updated_at: Date = new Date()

src/services/authentication.service.ts

@@ -1,11 +1,10 @@
 import type { User } from "@/models/user";
 import axios from "axios";
 
-export const MBL_API_URL = "http://localhost:8000/api/";
-
 export class AuthenticationService {
   constructor() {
-    axios.defaults.baseURL = `${MBL_API_URL}`
+    const apiURL = import.meta.env.VITE_MBL_API_URL;
+    axios.defaults.baseURL = `${apiURL}/api/`;
   }
 
   async findUsers() {

src/services/book.service.ts

@@ -1,11 +1,10 @@
 import type { Book } from "@/models/book";
 import axios from "axios";
 
-export const MBL_API_URL = "http://localhost:8000";
-
 export class BookService {
   constructor() {
-    axios.defaults.baseURL = `${MBL_API_URL}/api/books`;
+    const apiURL = import.meta.env.VITE_MBL_API_URL;
+    axios.defaults.baseURL = `${apiURL}/api/books`;
   }
 
   async findBooks() {

src/styles.css

@@ -8,6 +8,6 @@
 
 body {
   color: light-dark(#121212, #efefec);
-  background-color: light-dark(#efedea, #121212);
+  background-color: light-dark(#e1e1de, #121212);
   min-height: 100vh;
 }