function MainComponent() { const [activeTab, setActiveTab] = React.useState('ss24'); const handleTabClick = (tab)=>{ setActiveTab(tab); }; const styles = { active: 'text-red-500 font-roboto pb-2 border-b-2 border-red-500', inactive: 'text-red-500 font-roboto pb-2 hover:border-b-2 hover:border-red-500' }; const tabContent = { ss24: /*#__PURE__*/ React.createElement("div", { className: "px-4 py-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto my-2 text-red-500", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "SS24 Collection"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm mb-4 text-red-500", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Fresh Looks for the new Spring Summer 2024 Collection:")), fw24: /*#__PURE__*/ React.createElement("div", { className: "px-4 py-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto my-2 text-red-500", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "FW24 Collection"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm mb-4 text-red-500", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Introducing the Fall Winter 2024 Collection: Cozy up with our warm earthy tones and soft textiles.")), shopNow: /*#__PURE__*/ React.createElement("div", { className: "px-4 py-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto my-2 text-red-500", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Shop Now"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm mb-4 text-red-500", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Don't wait! Explore our wide range of clothing and accessories for all styles and seasons.")) }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 border-b border-red-200 my-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: activeTab === 'ss24' ? styles.active : styles.inactive, onClick: ()=>handleTabClick('ss24'), __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "SS24"), /*#__PURE__*/ React.createElement("h1", { className: activeTab === 'fw24' ? styles.active : styles.inactive, onClick: ()=>handleTabClick('fw24'), __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "FW24"), /*#__PURE__*/ React.createElement("h1", { className: activeTab === 'shopNow' ? styles.active : styles.inactive, onClick: ()=>handleTabClick('shopNow'), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Shop Now")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, tabContent[activeTab])); }