feat(templates): add BooksGrid component for reusable book grid rendering

Create new BooksGrid templ component that renders a grid of books with pagination. This component can be reused across multiple pages and returns HTML for HTMX updates.

- Add books_grid.templ with BooksGrid component
- Renders book cards using existing BookCard component
- Includes pagination controls with HTMX attributes
- Accepts books list, pagination params, and library ID
- Generated books_grid_templ.go from templ compiler
This commit is contained in:
2026-03-27 14:50:44 -04:00
parent 417685e9a7
commit a25f20f559
2 changed files with 150 additions and 0 deletions
+48
View File
@@ -0,0 +1,48 @@
package templates
import "bookhoard/internal/handlers"
templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, currentLibraryID string) {
<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
if len(books) > 0 {
for _, book := range books {
@BookCard(book)
}
} else {
<!-- Empty state -->
<div class="col-span-full text-center py-12" style="color: var(--text-secondary);">
<p class="text-lg mb-2">📚 No books found</p>
<p class="text-sm">Try adjusting your filters or add some books to your library.</p>
</div>
}
</div>
<!-- Pagination -->
<div id="pagination" class="mt-6 flex justify-center gap-2">
if count > 0 {
<button
type="button"
class="px-4 py-2 rounded-lg border disabled:opacity-50"
style="border-color: var(--border); color: var(--text-primary);"
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset - limit }"
hx-target="#books-grid"
hx-include="#filter-form"
disabled?={ offset <= 0 }
>
Previous
</button>
<span class="px-4 py-2" style="color: var(--text-secondary);">
Page { offset / limit + 1 }
</span>
<button
class="px-4 py-2 rounded-lg border disabled:opacity-50"
style="border-color: var(--border); color: var(--text-primary);"
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset + limit }"
hx-target="#books-grid"
hx-include="#filter-form"
disabled?={ offset+limit >= count }
>
Next
</button>
}
</div>
}