function DownloadIconComponent({ children, onClick }) { const [isClicked, setIsClicked] = React.useState(false); const handleClick = ()=>{ setIsClicked(true); onClick(); setTimeout(()=>setIsClicked(false), 2000); }; return /*#__PURE__*/ React.createElement("button", { onClick: handleClick, className: `flex items-center justify-center space-x-2 ${isClicked ? 'bg-green-500' : 'bg-blue-500'} text-white font-roboto p-2 rounded-lg transition-all duration-500`, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isClicked ? 'fa-check' : 'fa-download'}`, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), children); } function DownloadIconComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DownloadIconComponent, { onClick: ()=>console.log('Download initiated.'), __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Download")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, ` @keyframes scale-in { from { transform: scale(0); } to { transform: scale(1); } } @keyframes scale-out { from { transform: scale(1.5); } to { transform: scale(1); } } .fa-download { animation: scale-in 0.5s forwards; } .fa-check { animation: scale-out 0.5s forwards; } `)); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-blue-400 to-purple-600 flex flex-col", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-[#121212] text-white font-roboto flex justify-between items-center animate-fadeIn", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-apple-alt", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "WallPix")), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Admin"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "p-4 space-y-4 animate-slideIn", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-bold text-xl", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Latest Wallpapers"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 overflow-x-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(DownloadIconComponent, { onClick: ()=>console.log('Download initiated.'), __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Download")))), /*#__PURE__*/ React.createElement("section", { className: "p-4 animate-grow", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-bold text-xl", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-blue-900 font-semibold", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Nature"), /*#__PURE__*/ React.createElement(DownloadIconComponent, { onClick: ()=>console.log('Download initiated.'), __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "Download"))), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-blue-900 font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Abstract"), /*#__PURE__*/ React.createElement(DownloadIconComponent, { onClick: ()=>console.log('Download initiated.'), __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Download")))))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#121212] text-white font-roboto flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Connect with us:"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f", __source: { fileName: "", lineNumber: 45, columnNumber: 86 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 46, columnNumber: 86 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 47, columnNumber: 86 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-300 transition-colors duration-300", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 48, columnNumber: 86 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } } header, .animate-fadeIn { animation: fadeIn 1s ease-out; } main > section:first-child, .animate-slideIn { animation: slideIn 1s ease-out; } main > section:last-child, .animate-grow { animation: grow 1s ease-out; } `)); }