function Navigation() { const [activeSection, setActiveSection] = useState("shelf"); const navItems = [ { id: "shelf", label: "Shelf" }, { id: "search", label: "Search" }, { id: "add", label: "Add" } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-screen-xl mx-auto px-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-12", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveSection(item.id), className: `py-4 px-2 font-instrument-serif ${activeSection === item.id ? "text-[#1a1a1a]" : "text-[#999999] hover:text-[#666666]"}`, __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, item.label))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, activeSection === "shelf" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 39 }, __self: this }, "Shelf Content"), activeSection === "search" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 40 }, __self: this }, "Search Content"), activeSection === "add" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 37 }, __self: this }, "Add Content"))); } function NavigationStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function BookCard({ title, author, coverUrl, rating, dateAdded, layout = "grid" }) { const [isHovered, setIsHovered] = useState(false); const containerClasses = layout === "grid" ? "w-full sm:w-[200px] h-full" : "w-full flex items-start space-x-4"; const imageClasses = layout === "grid" ? "w-full aspect-[2/3]" : "w-[100px] aspect-[2/3]"; return /*#__PURE__*/ React.createElement("div", { className: `${containerClasses} group relative bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200`, onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: coverUrl, alt: `Cover of ${title}`, className: `${imageClasses} object-cover rounded-t-lg`, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-3", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-medium text-gray-900 line-clamp-2", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, author), /*#__PURE__*/ React.createElement("div", { className: `absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 transition-opacity duration-200 ${isHovered ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400 mr-1", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, rating, "/5")), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-500", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, dateAdded))))); } function BookCardStory() { const sampleBook = { title: "The Great Gatsby", author: "F. Scott Fitzgerald", coverUrl: "/sample-cover.jpg", rating: 4.5, dateAdded: "Jan 15, 2025" }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(BookCard, { ...sampleBook, layout: "grid", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(BookCard, { ...sampleBook, layout: "grid", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(BookCard, { ...sampleBook, layout: "list", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(BookCard, { ...sampleBook, layout: "list", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [books, setBooks] = useState([]); const [loading, setLoading] = useState(true); const [activeSection, setActiveSection] = useState("shelf"); const [activeYear, setActiveYear] = useState("2025"); const [searchQuery, setSearchQuery] = useState(""); const [searchResults, setSearchResults] = useState([]); const [searchLoading, setSearchLoading] = useState(false); const [addingBook, setAddingBook] = useState(false); const [selectedBook, setSelectedBook] = useState(null); const [formData, setFormData] = useState({ title: "", author: "", cover_url: "", notes: "", year: "2025" }); const [coverSuggestions, setCoverSuggestions] = useState([]); const [loadingSuggestions, setLoadingSuggestions] = useState(false); const [authorSuggestions, setAuthorSuggestions] = useState([]); const [loadingAuthors, setLoadingAuthors] = useState(false); const [upload, { loading: uploadLoading }] = useUpload(); const [previewUrl, setPreviewUrl] = useState(""); const fetchAuthorSuggestions = useCallback(async (title)=>{ if (!title) return; setLoadingAuthors(true); try { const response = await fetch("/api/book-author-suggester", { method: "POST", body: JSON.stringify({ title }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.suggestions) { setAuthorSuggestions(data.suggestions); } } catch (error) { console.error("Error fetching author suggestions:", error); } finally{ setLoadingAuthors(false); } }, []); const fetchCoverSuggestions = useCallback(async (title, author)=>{ if (!title || !author) return; setLoadingSuggestions(true); try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(`${title} ${author} book cover`)}`); const data = await response.json(); setCoverSuggestions(data.items.slice(0, 3)); } catch (error) { console.error("Error fetching cover suggestions:", error); } finally{ setLoadingSuggestions(false); } }, []); const handleImageUpload = async (e)=>{ const file = e.target.files[0]; if (file) { const { url, error } = await upload({ file }); if (!error) { setPreviewUrl(url); setFormData((prev)=>({ ...prev, cover_url: url })); } } }; const fetchBooks = useCallback(async ()=>{ setLoading(true); try { const response = await fetch("/api/books", { method: "POST", body: JSON.stringify({ year: activeYear }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.books && Array.isArray(data.books)) { const booksWithYear = data.books.map((book)=>({ ...book, year: book.year || activeYear })); setBooks(booksWithYear); } else { setBooks([]); } } catch (error) { console.error("Error fetching books:", error); setBooks([]); } finally{ setLoading(false); } }, [ activeYear ]); const searchBooks = useCallback(async (query)=>{ setSearchLoading(true); try { const response = await fetch("/api/bookssearch", { method: "POST", body: JSON.stringify({ query, year: activeYear }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.books) { const booksWithYear = data.books.map((book)=>({ ...book, year: book.year || activeYear })); setSearchResults(booksWithYear); } } finally{ setSearchLoading(false); } }, [ activeYear ]); useEffect(()=>{ fetchBooks(); }, [ fetchBooks ]); useEffect(()=>{ if (searchQuery) { const timer = setTimeout(()=>searchBooks(searchQuery), 300); return ()=>clearTimeout(timer); } }, [ searchQuery, searchBooks ]); useEffect(()=>{ if (formData.title) { const timer = setTimeout(()=>fetchAuthorSuggestions(formData.title), 300); return ()=>clearTimeout(timer); } }, [ formData.title, fetchAuthorSuggestions ]); const renderShelf = ()=>/*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-8 gap-y-8 sm:gap-y-16 max-w-5xl mx-auto px-2 sm:px-0", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, loading ? Array.from({ length: 12 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-gray-200 rounded-lg aspect-[2/3] w-[140px] sm:w-[160px] mx-auto", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this })) : books.map((book)=>/*#__PURE__*/ React.createElement("button", { key: book.id, onClick: ()=>setSelectedBook(book), className: "w-[140px] sm:w-[160px] aspect-[2/3] rounded-lg overflow-hidden shadow-md hover:shadow-lg transform hover:-rotate-3 transition-all duration-200 mx-auto", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.cover_url, alt: `Cover of ${book.title}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this })))); const renderSearch = ()=>/*#__PURE__*/ React.createElement("div", { className: "space-y-6 max-w-5xl mx-auto px-2 sm:px-0", __source: { fileName: "", lineNumber: 171, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto relative", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search by title or author...", className: "w-full px-4 py-2 font-work-sans text-sm text-gray-600 border-b border-gray-200 focus:outline-none focus:border-gray-400 transition-colors duration-200 pr-8", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }), searchQuery && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSearchQuery(""), className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-8 gap-y-8 sm:gap-y-16", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, searchLoading ? Array.from({ length: 6 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-gray-200 rounded-lg aspect-[2/3] w-[140px] sm:w-[160px] mx-auto", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this })) : searchResults.map((book)=>/*#__PURE__*/ React.createElement("button", { key: book.id, onClick: ()=>setSelectedBook(book), className: "w-[140px] sm:w-[160px] aspect-[2/3] rounded-lg overflow-hidden shadow-md hover:shadow-lg transform hover:-rotate-3 transition-all duration-200 mx-auto", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.cover_url, alt: `Cover of ${book.title}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }))))); const renderAddForm = ()=>/*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); if (!formData.title || !formData.author || !formData.cover_url) { return; } setAddingBook(true); try { const bookData = { title: formData.title.trim(), author: formData.author.trim(), cover_url: formData.cover_url, notes: formData.notes.trim(), rating: 0 }; const response = await fetch("/api/booksadd", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(bookData) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || `HTTP error! status: ${response.status}`); } if (data.book) { setFormData({ title: "", author: "", cover_url: "", notes: "", year: activeYear }); setPreviewUrl(""); setCoverSuggestions([]); setAuthorSuggestions([]); await fetchBooks(); setActiveSection("shelf"); } else { throw new Error("Failed to add book - no book data returned"); } } catch (error) { console.error("Error adding book:", error); alert("Failed to add book. Please try again."); } finally{ setAddingBook(false); } }, className: "space-y-6 max-w-xl mx-auto", __source: { fileName: "", lineNumber: 215, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Book Title", required: true, className: "w-full px-4 py-2 font-work-sans text-sm text-gray-600 border-b border-gray-200 focus:outline-none focus:border-gray-400 transition-colors duration-200", value: formData.title, onChange: (e)=>{ const newTitle = e.target.value; setFormData((prev)=>({ ...prev, title: newTitle })); if (newTitle && formData.author) { fetchCoverSuggestions(newTitle, formData.author); } }, __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }), loadingAuthors ? /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 291, columnNumber: 15 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "h-8 w-24 animate-pulse rounded-full bg-gray-100", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }))) : authorSuggestions.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }, authorSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", onClick: ()=>{ setFormData((prev)=>({ ...prev, author: suggestion.authors[0] })); if (formData.title) { fetchCoverSuggestions(formData.title, suggestion.authors[0]); } }, className: "rounded-full border border-gray-200 px-3 py-1 text-sm font-work-sans text-gray-600 hover:border-gray-400 hover:bg-gray-50 transition-all duration-200", __source: { fileName: "", lineNumber: 302, columnNumber: 19 }, __self: this }, suggestion.authors[0]))) : null), /*#__PURE__*/ React.createElement("input", { type: "text", name: "author", placeholder: "Author", required: true, className: "w-full px-4 py-2 font-work-sans text-sm text-gray-600 border-b border-gray-200 focus:outline-none focus:border-gray-400 transition-colors duration-200", value: formData.author, onChange: (e)=>{ setFormData((prev)=>({ ...prev, author: e.target.value })); if (e.target.value && formData.title) { fetchCoverSuggestions(formData.title, e.target.value); } }, __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 340, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 341, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-work-sans text-sm text-gray-500 mb-4", __source: { fileName: "", lineNumber: 342, columnNumber: 13 }, __self: this }, "Cover Image"), loadingSuggestions ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-gray-100 rounded-lg aspect-[2/3]", __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }))) : coverSuggestions.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }, coverSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", onClick: ()=>setFormData((prev)=>({ ...prev, cover_url: suggestion.originalImageUrl })), className: `aspect-[2/3] rounded-lg overflow-hidden border-2 transition-all duration-200 ${formData.cover_url === suggestion.originalImageUrl ? "border-gray-900 shadow-lg" : "border-transparent hover:border-gray-200"}`, __source: { fileName: "", lineNumber: 359, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: suggestion.originalImageUrl, alt: `Suggested cover ${index + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 374, columnNumber: 23 }, __self: this }))))) : formData.cover_url ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-48", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: formData.cover_url, alt: "Book cover preview", className: "w-full aspect-[2/3] object-cover rounded-lg shadow-md", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setFormData((prev)=>({ ...prev, cover_url: "" })), className: "absolute -top-2 -right-2 w-6 h-6 bg-white rounded-full shadow-md flex items-center justify-center text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 398, columnNumber: 21 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-48 bg-gray-50 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 403, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 font-work-sans", __source: { fileName: "", lineNumber: 404, columnNumber: 17 }, __self: this }, "Enter title and author to see cover suggestions")))), /*#__PURE__*/ React.createElement("textarea", { name: "notes", placeholder: "Review", className: "w-full px-4 py-2 font-work-sans text-sm text-gray-600 border-b border-gray-200 focus:outline-none focus:border-gray-400 transition-colors duration-200 h-32 resize-none", value: formData.notes, onChange: (e)=>setFormData((prev)=>({ ...prev, notes: e.target.value })), __source: { fileName: "", lineNumber: 412, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: addingBook, className: "w-full py-3 px-6 font-work-sans text-sm text-gray-900 border border-gray-200 rounded-lg hover:border-gray-400 hover:bg-gray-50 transition-all duration-200 disabled:text-gray-400 disabled:border-gray-100 disabled:bg-white mt-8", __source: { fileName: "", lineNumber: 422, columnNumber: 7 }, __self: this }, addingBook ? "Adding Book..." : "Add Book")); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 434, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/4fd42b7f-3983-4c2d-867b-eb7ca0db7b32/-/format/auto/", __source: { fileName: "", lineNumber: 435, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 441, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm z-50", __source: { fileName: "", lineNumber: 442, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-screen-xl mx-auto px-2 sm:px-4", __source: { fileName: "", lineNumber: 443, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "py-4 sm:py-6", __source: { fileName: "", lineNumber: 444, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between", __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4 sm:mb-0 px-2", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, [ "2024", "2025" ].map((year)=>/*#__PURE__*/ React.createElement("button", { key: year, onClick: ()=>setActiveYear(year), className: `px-3 py-1 text-sm font-work-sans ${activeYear === year ? "text-gray-900 font-medium" : "text-gray-400 hover:text-gray-600"}`, __source: { fileName: "", lineNumber: 448, columnNumber: 21 }, __self: this }, year))), /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-6 sm:space-x-12", __source: { fileName: "", lineNumber: 461, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("shelf"); setSelectedBook(null); }, className: `py-2 px-2 sm:px-4 font-instrument-serif text-base sm:text-lg ${activeSection === "shelf" ? "text-gray-900" : "text-gray-400 hover:text-gray-600"}`, __source: { fileName: "", lineNumber: 463, columnNumber: 21 }, __self: this }, "Shelf")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("search"); setSelectedBook(null); }, className: `py-2 px-2 sm:px-4 font-instrument-serif text-base sm:text-lg ${activeSection === "search" ? "text-gray-900" : "text-gray-400 hover:text-gray-600"}`, __source: { fileName: "", lineNumber: 478, columnNumber: 21 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 492, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveSection("add"); setSelectedBook(null); }, className: `py-2 px-2 sm:px-4 font-instrument-serif text-base sm:text-lg ${activeSection === "add" ? "text-gray-900" : "text-gray-400 hover:text-gray-600"}`, __source: { fileName: "", lineNumber: 493, columnNumber: 21 }, __self: this }, "Add"))))))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-screen-xl mx-auto px-2 sm:px-4 pt-24 sm:pt-28", __source: { fileName: "", lineNumber: 512, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "py-4 sm:py-8", __source: { fileName: "", lineNumber: 513, columnNumber: 11 }, __self: this }, !selectedBook ? /*#__PURE__*/ React.createElement(React.Fragment, null, activeSection === "shelf" && renderShelf(), activeSection === "search" && renderSearch(), activeSection === "add" && renderAddForm()) : /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto text-center px-4", __source: { fileName: "", lineNumber: 521, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedBook(null), className: "text-xs text-gray-400 hover:text-gray-600 mb-8", __source: { fileName: "", lineNumber: 522, columnNumber: 17 }, __self: this }, "Close"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 528, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedBook.cover_url, alt: `Cover of ${selectedBook.title}`, className: "w-48 sm:w-64 h-72 sm:h-96 object-cover rounded-lg mx-auto shadow-lg", __source: { fileName: "", lineNumber: 529, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 534, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl font-instrument-serif", __source: { fileName: "", lineNumber: 535, columnNumber: 21 }, __self: this }, selectedBook.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-work-sans", __source: { fileName: "", lineNumber: 538, columnNumber: 21 }, __self: this }, selectedBook.author)), selectedBook.notes && /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 font-work-sans text-sm leading-relaxed max-w-lg mx-auto", __source: { fileName: "", lineNumber: 543, columnNumber: 21 }, __self: this }, selectedBook.notes))))))); }