function MainComponent() { const [isFlipped, setIsFlipped] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[400px] perspective-[1000px] cursor-pointer", onClick: ()=>setIsFlipped(!isFlipped), __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute w-full h-full transition-transform duration-700 transform-style-preserve-3d ${isFlipped ? "rotate-y-180" : ""}`, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 backface-hidden p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Front Side"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Click to flip the card!")), /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full bg-[#f8f8f8] rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 backface-hidden rotate-y-180 p-6", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Back Side"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Click to flip back!"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, ` .perspective-[1000px] { perspective: 1000px; } .transform-style-preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .rotate-y-180 { transform: rotateY(180deg); } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this })); }