function MainComponent() { const items = [ { icon: "fa-solid fa-x", text: "Main - Riiihiro" }, { icon: "fa-solid fa-x", text: "Life - phtm_sano" }, { icon: "fas fa-paint-brush", text: "Pixiv" }, { icon: "fas fa-book", text: "AliceBooks" } ]; const [isFlipped, setIsFlipped] = React.useState(false); const handleMouseEnterImage = ()=>{ setIsFlipped(true); }; const handleMouseLeaveImage = ()=>{ setIsFlipped(false); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] font-roboto flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-gray-500 font-bold mb-10", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Son.tack"), /*#__PURE__*/ React.createElement("div", { className: `bg-white shadow-md rounded-lg overflow-hidden mb-10 w-[300px] h-[200px] transition-transform ${isFlipped ? "rotate-y-180" : ""}`, onMouseEnter: handleMouseEnterImage, onMouseLeave: handleMouseLeaveImage, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: isFlipped ? "/path/to/your/second-image.jpg" : "/path/to/your/image.jpg", alt: "Illustrated avatar", className: "w-full h-full", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 w-[300px]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4 justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "relative group cursor-pointer transition-transform bg-white hover:bg-[#ededed] hover:scale-105 p-2 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} text-xl text-black`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 transform -translate-x-1/2 bottom-full mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, item.text))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` .transition-transform { transition: transform 0.3s ease, background-color 0.3s ease; } .group-hover .group-hover\\:block { display: block; } ul li .absolute { left: 50%; } .rotate-y-180 { transform: rotateY(180deg); } `)); }