function MainComponent() { const [selectedTab, setSelectedTab] = React.useState('tab1'); let tabContent; if (selectedTab === 'tab1') { tabContent = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 18 }, __self: this }, "Post 1"); } else if (selectedTab === 'tab2') { tabContent = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 18 }, __self: this }, "Post 2"); } else if (selectedTab === 'tab3') { tabContent = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 18 }, __self: this }, "Post 3"); } let selectedTabStyle = "px-6 py-2 rounded border border-[#121212] bg-[#E8E8E8] font-semibold cursor-pointer"; let unselectedTabStyle = "px-6 py-2 rounded border border-transparent font-semibold cursor-pointer"; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "A short bio or description about the user. 📝"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "👍 Favorite count: 120")), /*#__PURE__*/ React.createElement("div", { className: "w-28 h-28", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative-path/to/profile-image.jpg", alt: "Profile image of the user", className: "rounded-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t-2 border-gray-200", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-8 py-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, [ 'tab1', 'tab2', 'tab3' ].map((tab)=>/*#__PURE__*/ React.createElement("div", { key: tab, className: selectedTab === tab ? selectedTabStyle : unselectedTabStyle, onClick: ()=>setSelectedTab(tab), __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, tab.toUpperCase()))), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ease-in-out ${selectedTab === '' ? 'opacity-0' : 'opacity-100'}`, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, tabContent)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, ` .MainComponent-tab-transition { transition: background-color .3s ease-in-out, opacity .5s ease-in-out; } `)); }