john-okeefe
a25f20f559
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
49 lines
1.6 KiB
Templ
49 lines
1.6 KiB
Templ
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>
|
|
}
|