function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(""); const [activeCategory, setActiveCategory] = React.useState("all"); const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); const [sortBy, setSortBy] = React.useState("popular"); const [styleFilter, setStyleFilter] = React.useState("all"); const [moodFilter, setMoodFilter] = React.useState("all"); const [favorites, setFavorites] = React.useState(new Set()); const [copiedId, setCopiedId] = React.useState(null); const categories = [ { id: "all", name: "All Prompts", icon: "fas fa-border-all" }, { id: "portraits", name: "Portraits", icon: "fas fa-user" }, { id: "landscapes", name: "Landscapes", icon: "fas fa-mountain" }, { id: "abstract", name: "Abstract", icon: "fas fa-paint-brush" }, { id: "fantasy", name: "Fantasy", icon: "fas fa-dragon" }, { id: "scifi", name: "Sci-Fi", icon: "fas fa-robot" }, { id: "anime", name: "Anime", icon: "fas fa-star" }, { id: "architecture", name: "Architecture", icon: "fas fa-building" }, { id: "nature", name: "Nature", icon: "fas fa-leaf" }, { id: "space", name: "Space", icon: "fas fa-rocket" } ]; const styles = [ { id: "all", name: "All Styles" }, { id: "realistic", name: "Realistic" }, { id: "abstract", name: "Abstract" }, { id: "fantasy", name: "Fantasy" }, { id: "anime", name: "Anime" }, { id: "sci-fi", name: "Sci-Fi" } ]; const moods = [ { id: "all", name: "All Moods" }, { id: "peaceful", name: "Peaceful" }, { id: "dark", name: "Dark" }, { id: "energetic", name: "Energetic" }, { id: "mysterious", name: "Mysterious" }, { id: "epic", name: "Epic" } ]; const allPrompts = [ { id: 1, prompt: "A futuristic cityscape at sunset", image: "/images/futuristic-city.jpg", category: "scifi", style: "realistic", mood: "epic", votes: 120, generationCount: 500, tags: [ "city", "futuristic", "sunset" ] }, { id: 2, prompt: "A serene landscape with mountains", image: "/images/serene-landscape.jpg", category: "landscapes", style: "realistic", mood: "peaceful", votes: 95, generationCount: 300, tags: [ "landscape", "mountains", "serene" ] } ]; const filteredPrompts = allPrompts.filter((prompt)=>{ const searchTerms = searchQuery.toLowerCase().split(" "); const matchesSearch = searchTerms.every((term)=>prompt.prompt.toLowerCase().includes(term) || prompt.tags.some((tag)=>tag.toLowerCase().includes(term)) || prompt.style.toLowerCase().includes(term) || prompt.mood.toLowerCase().includes(term)); const matchesCategory = activeCategory === "all" || prompt.category === activeCategory; const matchesStyle = styleFilter === "all" || prompt.style.toLowerCase() === styleFilter.toLowerCase(); const matchesMood = moodFilter === "all" || prompt.mood.toLowerCase() === moodFilter.toLowerCase(); return matchesSearch && matchesCategory && matchesStyle && matchesMood; }).sort((a, b)=>{ switch(sortBy){ case "popular": return b.votes - a.votes; case "newest": return b.id - a.id; case "rating": return b.rating - a.rating; case "generations": return b.generationCount - a.generationCount; default: return 0; } }); const usePrompt = (promptText)=>{ window.location.href = `/app?prompt=${encodeURIComponent(promptText)}`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] text-[#B6B7B7] font-inter", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsSidebarOpen(!isSidebarOpen), className: "md:hidden fixed top-4 left-4 z-50 text-white bg-[#1d2124] p-2 rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-xs", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: `fixed h-full w-64 bg-[#141415] border-r border-[#B6B7B7]/10 p-6 z-40 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 transition-transform duration-300`, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Create AI Logo", className: "h-8 w-8", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-semibold text-xl ml-3", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Create"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-6", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-sm px-4 mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-1", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center px-4 py-2 text-[#B6B7B7] hover:text-white hover:bg-[#1d2124] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xs w-5", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center px-4 py-2 text-[#B6B7B7] hover:text-white hover:bg-[#1d2124] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xs w-5", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "flex items-center px-4 py-2 text-[#B6B7B7] hover:text-white hover:bg-[#1d2124] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-newspaper text-xs w-5", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Blog")), /*#__PURE__*/ React.createElement("a", { href: "/prompts", className: "flex items-center px-4 py-2 text-white bg-[#1d2124] rounded-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-xs w-5", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "Prompts")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-sm px-4 mb-2", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Tools"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-1", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/app", className: "flex items-center px-4 py-2 text-[#B6B7B7] hover:text-white hover:bg-[#1d2124] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wand-magic-sparkles text-xs w-5", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Create Image")), /*#__PURE__*/ React.createElement("a", { href: "/video", className: "flex items-center px-4 py-2 text-[#B6B7B7] hover:text-white hover:bg-[#1d2124] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-xs w-5", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "Create Video"))))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-6 left-6 right-6", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/app", className: "w-full bg-white hover:bg-white/90 text-[#141415] rounded-lg py-2 px-4 flex items-center justify-center font-medium transition-colors", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-xs mr-2", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }), "New Image"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 md:ml-64 min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1920px] mx-auto p-4 md:p-6 flex-1", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-white mb-2 opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "Prompt Library")), /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 z-10 bg-[#141415]/95 backdrop-blur-md p-2 rounded-lg mb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex-1", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search prompts...", className: "w-full bg-[#1d2124] text-[#B6B7B7] py-1.5 px-8 rounded text-sm", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-2.5 top-1/2 -translate-y-1/2 text-[#B6B7B7] text-xs", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: styleFilter, onChange: (e)=>setStyleFilter(e.target.value), className: "bg-[#1d2124] text-[#B6B7B7] px-2 py-1.5 rounded text-sm", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, styles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style.id, value: style.id, __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }, style.name))), /*#__PURE__*/ React.createElement("select", { value: moodFilter, onChange: (e)=>setMoodFilter(e.target.value), className: "bg-[#1d2124] text-[#B6B7B7] px-2 py-1.5 rounded text-sm", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("option", { key: mood.id, value: mood.id, __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, mood.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1 overflow-x-auto", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setActiveCategory(category.id), className: `p-1.5 rounded transition-all duration-300 ${activeCategory === category.id ? "bg-[#1d2124] text-white" : "text-[#B6B7B7] hover:text-white"}`, __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${category.icon} text-xs`, __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, filteredPrompts.map((prompt)=>/*#__PURE__*/ React.createElement("div", { key: prompt.id, className: "flex bg-[#1d2124] rounded-lg overflow-hidden hover:bg-[#1d2124]/80 transition-colors h-[280px]", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[140px] h-full flex-shrink-0", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: prompt.image, alt: prompt.prompt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6 flex flex-col min-w-0", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-3", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-base line-clamp-3 flex-1", __source: { fileName: "", lineNumber: 227, columnNumber: 23 }, __self: this }, prompt.prompt), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(prompt.prompt); setCopiedId(prompt.id); setTimeout(()=>setCopiedId(null), 2000); }, className: "ml-2 text-[#B6B7B7] hover:text-white transition-colors relative group", title: "Copy prompt", __source: { fileName: "", lineNumber: 230, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${copiedId === prompt.id ? "fa-check" : "fa-copy"} text-xs`, __source: { fileName: "", lineNumber: 239, columnNumber: 25 }, __self: this }))))))))))); }