function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const handleNext = ()=>{ if (currentIndex < 4) setCurrentIndex(currentIndex + 1); }; const transformStyle = { transform: `translateX(-${currentIndex * 100}%)` }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white shadow-lg rounded-lg p-6 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-sans text-2xl", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "アンケートフォーム"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full overflow-hidden", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-[500%] transition-transform duration-500", style: transformStyle, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[20%] p-4 flex-shrink-0", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "質問1"), /*#__PURE__*/ React.createElement("input", { name: "question1", type: "text", className: "w-full mt-2 p-2 border rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleNext, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "次へ")), /*#__PURE__*/ React.createElement("div", { className: "w-[20%] p-4 flex-shrink-0", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "質問2"), /*#__PURE__*/ React.createElement("input", { name: "question2", type: "text", className: "w-full mt-2 p-2 border rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleNext, __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "次へ")), /*#__PURE__*/ React.createElement("div", { className: "w-[20%] p-4 flex-shrink-0", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "質問3"), /*#__PURE__*/ React.createElement("input", { name: "question3", type: "text", className: "w-full mt-2 p-2 border rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleNext, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "次へ")), /*#__PURE__*/ React.createElement("div", { className: "w-[20%] p-4 flex-shrink-0", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "質問4"), /*#__PURE__*/ React.createElement("input", { name: "question4", type: "text", className: "w-full mt-2 p-2 border rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleNext, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "次へ")), /*#__PURE__*/ React.createElement("div", { className: "w-[20%] p-4 flex-shrink-0", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-sans", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "質問5"), /*#__PURE__*/ React.createElement("input", { name: "question5", type: "text", className: "w-full mt-2 p-2 border rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleNext, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "送信")))))); }