function MainComponent() { const [activeTab, setActiveTab] = React.useState(''); function handleTabChange(tabName) { setActiveTab(tabName); } const isPhotographyTabActive = activeTab === 'photography'; const isCodingTabActive = activeTab === 'coding'; const isEducationTabActive = activeTab === 'education'; const isLifeTabActive = activeTab === 'life'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[900px] h-[500px]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/desk-top-view.jpg", alt: "A top-down view of a desk", className: "absolute top-0 left-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 mt-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/avatar.png", alt: "Personal avatar", className: "w-24 h-24 rounded-full border-4 border-white shadow-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-x-0 bottom-10 flex justify-between px-10", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "photography", onClick: ()=>handleTabChange('photography'), className: `w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center transform transition-transform ${isPhotographyTabActive ? 'scale-110' : 'scale-100'}`, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-camera text-xl text-[#555]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "coding", onClick: ()=>handleTabChange('coding'), className: `w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center transform transition-transform ${isCodingTabActive ? 'scale-110' : 'scale-100'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-laptop-code text-xl text-[#555]", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "education", onClick: ()=>handleTabChange('education'), className: `w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center transform transition-transform ${isEducationTabActive ? 'scale-110' : 'scale-100'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-graduation-cap text-xl text-[#555]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "life", onClick: ()=>handleTabChange('life'), className: `w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center transform transition-transform ${isLifeTabActive ? 'scale-110' : 'scale-100'}`, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-book text-xl text-[#555]", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, isPhotographyTabActive && /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 68, columnNumber: 38 }, __self: this }, "Photography"), isCodingTabActive && /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 33 }, __self: this }, "Coding"), isEducationTabActive && /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 70, columnNumber: 36 }, __self: this }, "Education"), isLifeTabActive && /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 71, columnNumber: 31 }, __self: this }, "Life")))); }