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 [featuredImages, setFeaturedImages] = useState([]); const [trendingImages, setTrendingImages] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [searchQuery, setSearchQuery] = useState(""); const [images, setImages] = useState([]); const [searchLoading, setSearchLoading] = useState(false); const [searchError, setSearchError] = useState(null); const popularSearches = [ "Nature", "Architecture", "Travel", "Technology", "Food", "Animals", "Abstract", "Business" ]; 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: "Food", icon: "fas fa-utensils" } ]; const loadImages = async (query, isFeatured = false)=>{ try { const response = await fetch("/api/search-images", { method: "POST", body: JSON.stringify({ query, page: isFeatured ? 1 : page, per_page: isFeatured ? 5 : 30 }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } const images = data.images || []; if (isFeatured) { setFeaturedImages(images); } else { if (images.length === 0) { setHasMore(false); } else { setTrendingImages((prev)=>[ ...prev, ...images ]); setPage((prev)=>prev + 1); } } } catch (err) { console.error("Failed to load images:", err); setError(err.message); } finally{ setLoading(false); } }; useEffect(()=>{ loadImages("featured", true); loadImages("trending"); }, []); const handleSearch = async (e)=>{ e.preventDefault(); if (!searchQuery.trim()) return; setSearchLoading(true); setSearchError(null); try { const response = await fetch(`/api/search-images`, { method: "POST", body: JSON.stringify({ query: searchQuery, page: 1, per_page: 30 }) }); const data = await response.json(); setImages(data.images || []); } catch (err) { setSearchError("Failed to search images. Please try again."); } finally{ setSearchLoading(false); } }; const handleCategorySearch = (query)=>{ setSearchQuery(query); handleSearch({ preventDefault: ()=>{} }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { onSearch: handleCategorySearch, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex pt-20", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { categories: categories, onCategorySelect: (category)=>handleCategorySearch(category.name), __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-1 px-6 pb-12", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "flex w-full max-w-3xl mx-auto gap-4 mb-8", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Search for images...", className: "flex-1 p-4 bg-[#2a2a2a] text-white rounded-lg border border-[#333333] focus:outline-none focus:border-[#444444]", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: searchLoading, className: "px-8 py-4 bg-[#333333] hover:bg-[#444444] text-white rounded-lg transition-colors duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, searchLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }), "Searching...") : /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }), "Search"))), searchError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, searchError), searchLoading && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 8 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "bg-[#2a2a2a] rounded-lg overflow-hidden animate-pulse", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-48 bg-[#333333]", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#333333] rounded mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#333333] rounded w-2/3", __source: { fileName: "", lineNumber: 165, columnNumber: 21 }, __self: this }))))), images.length > 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "bg-[#2a2a2a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: image.tags, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#999999]", __source: { fileName: "", lineNumber: 187, columnNumber: 25 }, __self: this }, "by ", image.user), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 text-sm text-[#999999]", __source: { fileName: "", lineNumber: 190, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 191, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye mr-1", __source: { fileName: "", lineNumber: 192, columnNumber: 29 }, __self: this }), image.views), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 195, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1", __source: { fileName: "", lineNumber: 196, columnNumber: 29 }, __self: this }), image.likes))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 201, columnNumber: 23 }, __self: this }, image.tags?.split(",").map((tag, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-2 py-1 bg-[#333333] text-sm text-[#999999] rounded-full", __source: { fileName: "", lineNumber: 203, columnNumber: 27 }, __self: this }, tag.trim()))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: image.largeUrl, target: "_blank", rel: "noopener noreferrer", className: "px-4 py-2 bg-[#333333] hover:bg-[#444444] text-white rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 212, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 218, columnNumber: 27 }, __self: this }), "Download"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{}, className: "px-4 py-2 bg-[#333333] hover:bg-[#444444] text-white rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 221, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 225, columnNumber: 27 }, __self: this }), "Details")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-[#999999] mt-8", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "Images provided by", /*#__PURE__*/ React.createElement("a", { href: "https://pixabay.com/", target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-[#444444] ml-1", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, "Pixabay"))) : !searchLoading && searchQuery && /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#999999] py-12", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-4xl mb-4", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 250, columnNumber: 17 }, __self: this }, 'No images found for "', searchQuery, '"')), /*#__PURE__*/ React.createElement("section", { className: "mt-12 mb-12", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-white mb-6", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "Featured Images"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, (featuredImages || []).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: 261, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-white mb-6", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, "Popular Searches"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, popularSearches.map((search)=>/*#__PURE__*/ React.createElement("button", { key: search, onClick: ()=>handleCategorySearch(search), className: "px-6 py-3 bg-[#2a2a2a] hover:bg-[#333333] rounded-full text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, search)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-white mb-6", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, "Trending Now"), /*#__PURE__*/ React.createElement(ImageGrid, { images: trendingImages || [], onLoadMore: ()=>loadImages("trending"), loading: loading, hasMore: hasMore, __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] text-[#999999] py-12 px-6", __source: { fileName: "", lineNumber: 302, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-white mb-4", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, "ImageAI"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, "Discover and share the world's best AI-generated images. Create unique visuals with our advanced AI technology.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-white mb-4", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/search", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/bookmarks", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, "Bookmarks")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 340, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-white mb-4", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 text-xl", __source: { fileName: "", lineNumber: 342, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-white transition-colors duration-200", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-github", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto mt-8 pt-8 border-t border-[#333333] text-center text-sm", __source: { fileName: "", lineNumber: 364, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 365, columnNumber: 11 }, __self: this }, "© 2025 ImageAI. All rights reserved."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 369, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .main-content { animation: fadeIn 0.3s ease-in; } `)); }