import { Head, usePage, router } from '@inertiajs/react'; import MainLayout from '@/layouts/main-layout'; import { ReactNode, useState, useEffect } from 'react'; import { Search, ChevronLeft, ChevronRight, X, Filter, BookOpen } from 'lucide-react'; import { IoGrid } from "react-icons/io5"; import { LuAlignJustify } from "react-icons/lu"; import { motion, AnimatePresence } from "framer-motion" import BookCard, { BadgeType } from '@/components/book'; import { type PageProps } from '@/types' interface Book { id: string title: string author: string cover: string | null genre: string | null badge: BadgeType } interface Pagination { current_page: number last_page: number total: number per_page: number } interface Props extends PageProps { books: Book[] pagination: Pagination filters: { search?: string genre?: string } wishlistedIds: string[]; } const categories = [ { name: 'Semua', value: 'all' }, { name: 'Fiksi', value: 'fiction' }, { name: 'Non-fiksi', value: 'non-fiction' }, { name: 'Anak-anak', value: 'children' }, { name: 'Sains', value: 'science' }, { name: 'Sejarah', value: 'history' }, ] export default function Collection() { const { books, pagination, filters, wishlistedIds = [] } = usePage().props; const [search, setSearch] = useState(filters.search ?? '') const [activeGenre, setActiveGenre] = useState(filters.genre ?? 'all') const [activeDisplay, setActiveDisplay] = useState('Grid'); // Debounce search agar tidak spam request ke Laravel useEffect(() => { const timeout = setTimeout(() => { if (search !== (filters.search ?? '')) { router.get('/collection', { search, genre: activeGenre === 'all' ? '' : activeGenre, page: 1, }, { preserveState: true, replace: true }) } }, 500) return () => clearTimeout(timeout) }, [search]) const handleGenre = (genre: string) => { setActiveGenre(genre) router.get('/collection', { search, genre: genre === 'all' ? '' : genre, page: 1, }, { preserveState: true }) } const handlePage = (page: number | string) => { if (typeof page === 'string') return; router.get('/collection', { search, genre: activeGenre === 'all' ? '' : activeGenre, page, }, { preserveState: true, preserveScroll: false }) } const getPages = () => { const pages: (number | '...')[] = [] const { current_page, last_page } = pagination if (last_page <= 5) { for (let i = 1; i <= last_page; i++) pages.push(i) } else { pages.push(1) if (current_page > 3) pages.push('...') for (let i = Math.max(2, current_page - 1); i <= Math.min(last_page - 1, current_page + 1); i++) { pages.push(i) } if (current_page < last_page - 2) pages.push('...') pages.push(last_page) } return pages } return ( <> {/* Background tetap menggunakan dot pattern agar konsisten dengan Landing Page */}

{/* ── Header Section ── */}

Explorasi Koleksi

Temukan Inspirasi.

Ribuan buku pilihan dari berbagai genre siap menemani harimu.

{/* Display Toggle - Glassmorphism style */}

{[ { name: "Grid", icon: IoGrid }, { name: "List", icon: LuAlignJustify }, ].map((d) => ( ))}

{/* ── Toolbar: Search & Genre ── */}

{/* Modern Search bar */}

setSearch(e.target.value)} placeholder="Cari judul, penulis, atau ISBN..." className="w-full bg-bukuku-bg text-bukuku-dark border-none rounded-2xl py-3.5 pl-12 pr-10 text-sm font-medium focus:ring-2 focus:ring-bukuku-primary/10 transition-all outline-none" /> {search && ( )}

{/* Genre Pills - Mobile Scrollable */}

{categories.map((c) => ( ))}

Hasil Pencarian {pagination.total.toLocaleString()} Buku

{/* ── Book Display Area ── */} {books.length > 0 ? ( {books.map((book, idx) => ( ))} ) : ( /* Empty State - Reused from previous concept but adapted */

Ups! Buku tidak ditemukan.

Coba cari dengan kata kunci lain atau ubah kategori filter.

)} {/* ── Pagination: Premium Look ── */} {pagination.last_page > 1 && (

{getPages().map((page, index) => ( ))}

)}

); } Collection.layout = (page: ReactNode) => {page};