function ImageCard({ image, onBookmark, onDownload }) { const [isLoading, setIsLoading] = useState(true); const [isHovered, setIsHovered] = useState(false); const [isBookmarked, setIsBookmarked] = useState(false); const handleBookmark = async ()=>{ setIsBookmarked(!isBookmarked); if (onBookmark) { onBookmark(image); } }; const handleDownload = async ()=>{ if (onDownload) { onDownload(image); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative rounded-lg overflow-hidden bg-[#2a2a2a] shadow-lg", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-12 relative", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: image.title || "Image", className: `w-full h-full object-cover transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`, onLoad: ()=>setIsLoading(false), __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-[#666666]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-black/50 transition-opacity duration-300 ${isHovered ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 flex gap-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBookmark, className: "p-2 rounded-full bg-[#2a2a2a] hover:bg-[#333333] transition-transform duration-200 hover:scale-110", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-bookmark ${isBookmarked ? "text-yellow-500" : "text-white"}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "p-2 rounded-full bg-[#2a2a2a] hover:bg-[#333333] transition-transform duration-200 hover:scale-110", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 right-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/image/${image.id}`, className: "block w-full text-center py-2 bg-[#2a2a2a] hover:bg-[#333333] rounded-lg text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "View Details")))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-white mb-2 truncate", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, image.title || "Untitled"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, image.tags?.split(",").map((tag, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-2 py-1 text-sm bg-[#333333] text-[#999999] rounded-full", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, tag.trim()))))); } function ImageCardStory() { const sampleImage = { id: "123", url: "https://picsum.photos/400/300", title: "Beautiful Landscape", tags: "nature,landscape,mountains" }; const sampleImageNoTitle = { id: "124", url: "https://picsum.photos/400/300", tags: "city,urban,night" }; const sampleImageNoTags = { id: "125", url: "https://picsum.photos/400/300", title: "Abstract Art" }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen p-8", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ImageCard, { image: sampleImage, onBookmark: (img)=>console.log("Bookmark:", img), onDownload: (img)=>console.log("Download:", img), __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ImageCard, { image: sampleImageNoTitle, onBookmark: (img)=>console.log("Bookmark:", img), onDownload: (img)=>console.log("Download:", img), __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ImageCard, { image: sampleImageNoTags, onBookmark: (img)=>console.log("Bookmark:", img), onDownload: (img)=>console.log("Download:", img), __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }))); } function ImageGrid({ images, onLoadMore, loading, hasMore }) { const [containerRef, setContainerRef] = useState(null); const [columns, setColumns] = useState(3); const [loadingMore, setLoadingMore] = useState(false); useEffect(()=>{ const updateColumns = ()=>{ if (window.innerWidth < 640) { setColumns(1); } else if (window.innerWidth < 1024) { setColumns(2); } else { setColumns(3); } }; updateColumns(); window.addEventListener("resize", updateColumns); return ()=>window.removeEventListener("resize", updateColumns); }, []); useEffect(()=>{ if (!containerRef) return; const observer = new IntersectionObserver(async (entries)=>{ const target = entries[0]; if (target.isIntersecting && hasMore && !loading && !loadingMore) { setLoadingMore(true); await onLoadMore(); setLoadingMore(false); } }, { threshold: 0.1 }); observer.observe(containerRef); return ()=>observer.disconnect(); }, [ containerRef, hasMore, loading, loadingMore, onLoadMore ]); const getColumnImages = (columnIndex)=>{ return images.filter((_, index)=>index % columns === columnIndex); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full px-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, Array.from({ length: columns }).map((_, columnIndex)=>/*#__PURE__*/ React.createElement("div", { key: columnIndex, className: "flex flex-col gap-6", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, getColumnImages(columnIndex).map((image)=>/*#__PURE__*/ React.createElement(ImageCard, { key: image.id, image: image, onBookmark: (img)=>console.log("Bookmark:", img), onDownload: (img)=>console.log("Download:", img), __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { ref: setContainerRef, className: "w-full h-20 flex items-center justify-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "text-[#666666]", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }))))); } function ImageGridStory() { const [page, setPage] = useState(1); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const loadImages = async ()=>{ setLoading(true); try { const response = await fetch("/api/search-images", { method: "POST", body: JSON.stringify({ query: "nature", page, per_page: 30 }) }); const data = await response.json(); if (data.images.length === 0) { setHasMore(false); } else { setImages((prev)=>[ ...prev, ...data.images ]); setPage((prev)=>prev + 1); } } catch (error) { console.error("Failed to load images:", error); } finally{ setLoading(false); } }; useEffect(()=>{ loadImages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] py-8", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGrid, { images: images, onLoadMore: loadImages, loading: loading, hasMore: hasMore, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this })); } function Sidebar({ categories, tags, filters, onCategorySelect, onTagSelect, onFilterChange }) { const [isOpen, setIsOpen] = useState(true); const [activeCategory, setActiveCategory] = useState(null); const [selectedTags, setSelectedTags] = useState([]); const [selectedFilters, setSelectedFilters] = useState({}); const handleCategoryClick = (category)=>{ setActiveCategory(category); if (onCategorySelect) { onCategorySelect(category); } }; const handleTagClick = (tag)=>{ const newSelectedTags = selectedTags.includes(tag) ? selectedTags.filter((t)=>t !== tag) : [ ...selectedTags, tag ]; setSelectedTags(newSelectedTags); if (onTagSelect) { onTagSelect(newSelectedTags); } }; const handleFilterChange = (filterName, value)=>{ const newFilters = { ...selectedFilters, [filterName]: value }; setSelectedFilters(newFilters); if (onFilterChange) { onFilterChange(newFilters); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "md:hidden fixed top-20 left-4 z-50 p-2 bg-[#2a2a2a] rounded-lg text-white", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isOpen ? "times" : "bars"} text-xl`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("aside", { className: ` fixed md:sticky top-20 left-0 h-[calc(100vh-5rem)] bg-[#1a1a1a] text-white w-[280px] transform transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "-translate-x-full"} md:translate-x-0 overflow-y-auto border-r border-[#333333] `, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, categories?.map((category)=>/*#__PURE__*/ React.createElement("li", { key: category.id, __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCategoryClick(category), className: `w-full text-left px-4 py-2 rounded-lg transition-colors duration-200 ${activeCategory?.id === category.id ? "bg-[#333333] text-white" : "hover:bg-[#2a2a2a] text-[#999999]"}`, __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${category.icon} mr-2`, __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }), category.name))))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Popular Tags"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, tags?.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag, onClick: ()=>handleTagClick(tag), className: `px-3 py-1 rounded-full text-sm transition-colors duration-200 ${selectedTags.includes(tag) ? "bg-[#333333] text-white" : "bg-[#2a2a2a] text-[#999999] hover:bg-[#333333]"}`, __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, tag)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Filters"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, filters?.map((filter)=>/*#__PURE__*/ React.createElement("div", { key: filter.name, __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#999999] mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, filter.label), /*#__PURE__*/ React.createElement("select", { value: selectedFilters[filter.name] || "", onChange: (e)=>handleFilterChange(filter.name, e.target.value), className: "w-full px-3 py-2 bg-[#2a2a2a] rounded-lg text-white border border-[#333333] focus:outline-none focus:border-[#444444]", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 117, columnNumber: 21 }, __self: this }, "Select ", filter.label), filter.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 119, columnNumber: 23 }, __self: this }, option.label)))))))))); } function SidebarStory() { const sampleCategories = [ { id: 1, name: "Nature", icon: "fas fa-tree" }, { id: 2, name: "Architecture", icon: "fas fa-building" }, { id: 3, name: "People", icon: "fas fa-users" }, { id: 4, name: "Technology", icon: "fas fa-laptop" } ]; const sampleTags = [ "Landscape", "Portrait", "Urban", "Wildlife", "Black & White", "Minimal", "Colorful", "Abstract" ]; const sampleFilters = [ { name: "orientation", label: "Orientation", options: [ { value: "horizontal", label: "Horizontal" }, { value: "vertical", label: "Vertical" }, { value: "square", label: "Square" } ] }, { name: "size", label: "Image Size", options: [ { value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] pt-20", __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { categories: sampleCategories, tags: sampleTags, filters: sampleFilters, onCategorySelect: (category)=>console.log("Selected category:", category), onTagSelect: (tags)=>console.log("Selected tags:", tags), onFilterChange: (filters)=>console.log("Filter changed:", filters), __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[2000px] bg-[#2a2a2a] rounded-lg p-6 text-white", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "Main content area (scrollable)")))); } function Header({ onSearch }) { const [searchQuery, setSearchQuery] = useState(""); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const handleSearchSubmit = (e)=>{ e.preventDefault(); if (onSearch) { onSearch(searchQuery); } }; return /*#__PURE__*/ React.createElement("header", { className: "bg-[#121212] text-white py-4 px-6 fixed w-full top-0 z-50", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-2xl mr-2", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto font-bold", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "ImageAI"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "hidden md:flex flex-1 max-w-2xl mx-8", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Search images...", className: "w-full px-4 py-2 bg-[#2a2a2a] rounded-lg text-white border border-[#333333] focus:outline-none focus:border-[#444444] transition-colors duration-200", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-3 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[#666666]", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex items-center space-x-6", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }), "Search"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark mr-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), "Bookmarks")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-2xl", onClick: ()=>setIsMobileMenuOpen(!isMobileMenuOpen), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMobileMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))), isMobileMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden mt-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Search images...", className: "w-full px-4 py-2 bg-[#2a2a2a] rounded-lg text-white border border-[#333333] focus:outline-none focus:border-[#444444]", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-3 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[#666666]", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }), "Search"), /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "hover:text-[#666666] transition-colors duration-200", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark mr-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), "Bookmarks"))))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-[#1a1a1a]", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { onSearch: (query)=>console.log("Search:", query), __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-20 px-6", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "Content goes here..."))); } function MainComponent() { const [query, setQuery] = useState(""); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const [page, setPage] = useState(1); const [error, setError] = useState(null); const [selectedCategory, setSelectedCategory] = useState(null); const [selectedTags, setSelectedTags] = useState([]); const [selectedFilters, setSelectedFilters] = useState({}); const [sortBy, setSortBy] = useState("popular"); const categories = [ { id: 1, name: "Nature", icon: "fas fa-tree" }, { id: 2, name: "Architecture", icon: "fas fa-building" }, { id: 3, name: "People", icon: "fas fa-users" }, { id: 4, name: "Technology", icon: "fas fa-laptop" }, { id: 5, name: "Animals", icon: "fas fa-paw" }, { id: 6, name: "Travel", icon: "fas fa-plane" } ]; const tags = [ "Landscape", "Portrait", "Urban", "Wildlife", "Black & White", "Minimal", "Colorful", "Abstract" ]; const filters = [ { name: "orientation", label: "Orientation", options: [ { value: "horizontal", label: "Horizontal" }, { value: "vertical", label: "Vertical" }, { value: "square", label: "Square" } ] }, { name: "size", label: "Image Size", options: [ { value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" } ] } ]; const loadImages = async ()=>{ if (loading || !query.trim()) return; setLoading(true); setError(null); try { const response = await fetch("/api/search-images", { method: "POST", body: JSON.stringify({ query: `${query} ${selectedCategory ? selectedCategory.name : ""} ${selectedTags.join(" ")}`, page, per_page: 30 }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (page === 1) { setImages(data.images); } else { setImages((prev)=>[ ...prev, ...data.images ]); } setHasMore(data.images.length === 30); setPage((prev)=>prev + 1); } catch (err) { setError(err.message); console.error("Failed to load images:", err); } finally{ setLoading(false); } }; const handleSearch = (e)=>{ e.preventDefault(); setPage(1); setImages([]); loadImages(); }; const handleBookmark = async (image)=>{ try { await fetch("/api/bookmark-image", { method: "POST", body: JSON.stringify({ image_id: image.id, image_url: image.url, title: image.title || "Untitled", user_id: "guest" }) }); } catch (error) { console.error("Failed to bookmark image:", error); } }; const handleDownload = async (image)=>{ try { await fetch("/api/record-download", { method: "POST", body: JSON.stringify({ image_id: image.id, download_url: image.largeUrl, user_id: "guest" }) }); window.open(image.largeUrl, "_blank"); } catch (error) { console.error("Failed to record download:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] pt-20", __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { categories: categories, tags: tags, filters: filters, onCategorySelect: setSelectedCategory, onTagSelect: setSelectedTags, onFilterChange: setSelectedFilters, __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "flex gap-4", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Search for images...", className: "w-full px-4 py-3 bg-[#2a2a2a] rounded-lg text-white border border-[#333333] focus:outline-none focus:border-[#444444]", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: sortBy, onChange: (e)=>setSortBy(e.target.value), className: "px-4 py-3 bg-[#2a2a2a] rounded-lg text-white border border-[#333333] focus:outline-none focus:border-[#444444]", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "popular", __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, "Popular"), /*#__PURE__*/ React.createElement("option", { value: "latest", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, "Latest"), /*#__PURE__*/ React.createElement("option", { value: "relevant", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }, "Most Relevant")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-8 py-3 bg-[#333333] hover:bg-[#444444] rounded-lg text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Search"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4 p-4 bg-[#2a2a2a] rounded-lg", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, error), images.length === 0 && !loading && query && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-4xl text-[#666666] mb-4", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666] text-xl", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, 'No images found for "', query, '"')), /*#__PURE__*/ React.createElement(ImageGrid, { images: images, onLoadMore: loadImages, loading: loading, hasMore: hasMore, onBookmark: handleBookmark, onDownload: handleDownload, __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }))))); }