function MainComponent() { const [selectedCategory, setSelectedCategory] = React.useState('economy'); const handleChangeCategory = (category)=>()=>{ setSelectedCategory(category); }; let contentDisplay; if (selectedCategory === 'economy') { contentDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Global Economy"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Explore the various economic indicators that shape the world's economy, such as GDP, inflation rates, and employment statistics."), /*#__PURE__*/ React.createElement("img", { src: "./images/economy.jpg", alt: "Graphs illustrating various economic indicators", className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })); } else if (selectedCategory === 'society') { contentDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Global Society"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Discover how societal factors such as education, healthcare, and social policies impact the global community."), /*#__PURE__*/ React.createElement("img", { src: "./images/society.jpg", alt: "Collage of global societal interactions", className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f4f7fc] text-[#121212] overflow-hidden", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between p-6 bg-[#ffffff] shadow-md", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "The Socio-Economic State of the World"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleChangeCategory('economy'), className: `px-4 py-2 mr-2 font-semibold text-sm uppercase rounded-md ${selectedCategory === 'economy' ? 'bg-[#a0aec0] text-white' : 'bg-transparent text-[#a0aec0]'} font-roboto`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Economy"), /*#__PURE__*/ React.createElement("button", { onClick: handleChangeCategory('society'), className: `px-4 py-2 font-semibold text-sm uppercase rounded-md ${selectedCategory === 'society' ? 'bg-[#a0aec0] text-white' : 'bg-transparent text-[#a0aec0]'} font-roboto`, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "SOCIETY"))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, contentDisplay), /*#__PURE__*/ React.createElement("footer", { className: "p-6 bg-[#ffffff] shadow-inner text-center font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "© ", new Date().getFullYear(), " Socio-Economic Studies. All rights reserved.")); }