function MainComponent() { const iconsWithHover = [ { icon: 'search', text: 'Search' }, { icon: 'star', text: 'Reviews' }, { icon: 'newspaper', text: 'News' }, { icon: 'compass', text: 'Guides' }, { icon: 'map', text: 'Interactive Maps' }, { icon: 'list', text: 'Playlist' }, { icon: 'fire', text: 'Discover' }, { icon: 'shopping-bag', text: 'Store' }, { icon: 'trophy', text: 'Rewards' }, { icon: 'video', text: 'Videos' }, { icon: 'ellipsis-h', text: 'More' } ]; const [hoveredIcon, setHoveredIcon] = React.useState(null); const handleMouseEnter = (icon)=>{ setHoveredIcon(icon); }; const handleMouseLeave = ()=>{ setHoveredIcon(null); }; const backToTop = ()=>{ window.scrollTo({ top: 0, behavior: 'smooth' }); }; const blogPosts = [ { title: 'The Xbox Brand Faces an Inferno...', description: 'Will Something Better Rise from the Ashes?', imageSrc: '/images/xbox-inferno.jpg' }, { title: 'Lisa Frankenstein Review', description: '', imageSrc: '/images/lisa-frankenstein.jpg' }, { title: 'Halo Season 2 Episodes 1-4 Review', description: '', imageSrc: '/images/halo-season2.jpg' }, { title: 'Foamstars Review in Progress', description: '', imageSrc: '/images/foamstars-review.jpg' } ]; const currentYear = new Date().getFullYear(); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "hidden lg:flex flex-col bg-white shadow-lg w-60", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "ign-logo.svg", alt: "IGN logo", className: "h-12 mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "flex-grow", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, iconsWithHover.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.icon, onMouseEnter: ()=>handleMouseEnter(item.icon), onMouseLeave: handleMouseLeave, className: `p-2 flex items-center space-x-2 hover:bg-gray-200 cursor-pointer ${hoveredIcon === item.icon ? 'text-red-600' : 'text-gray-600'}`, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-${item.icon} fa-lg`, style: { opacity: hoveredIcon === item.icon ? 1 : 0.5 }, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "hidden lg:block", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, item.text)))), /*#__PURE__*/ React.createElement("div", { className: "p-2 flex justify-between", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: backToTop, className: "w-32 py-2 bg-gray-300 text-gray-600 rounded shadow hover:bg-gray-400 focus:outline-none transition duration-200 ease-in", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Back To Top"), /*#__PURE__*/ React.createElement("button", { className: "w-32 py-2 bg-red-600 text-white rounded shadow hover:bg-red-700 focus:outline-none transition duration-200 ease-in", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Join for free or log in"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-auto p-5", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, blogPosts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-2 rounded-lg shadow hover:shadow-lg transform transition duration-300", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover rounded-t-lg", src: post.imageSrc, alt: `${post.title}`, __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-gray-900 mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, post.title), post.description && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 90, columnNumber: 38 }, __self: this }, post.description)))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-4 bg-white text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "© ", currentYear, " IGN Africa")))); }