MyFavStuff2/src/pages/index.astro
2025-05-20 21:49:53 +02:00

29 lines
1.1 KiB
Plaintext

---
import Layout from "../layouts/Layout.astro";
import { getCollection } from 'astro:content';
// Fetch all entries from the 'books' collection
const allBooks = await getCollection('books');
---
<Layout>
<h1 class="text-3xl font-bold mb-6 text-center">My Book List</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-4">
{allBooks.map(book => (
<div class="bg-white rounded-lg shadow-lg p-6 flex flex-col items-center text-center">
<img
src={book.data.cover}
alt={`${book.data.title} cover`}
class="w-40 h-56 object-cover mb-4 rounded-md border shadow-md"
/>
<h2 class="text-2xl font-bold text-gray-800 mb-1">{book.data.title}</h2>
<p class="text-md text-gray-700 mb-1">by {book.data.author} ({book.data.year})</p>
<p class="text-sm text-gray-500 mb-3">{book.data.genre} • Rating: {book.data.rating}/5</p>
{/* Accessing the Markdown body for the description */}
<p class="text-gray-600 text-sm">{book.body}</p>
</div>
))}
</div>
</Layout>