function MainComponent() { const [step, setStep] = React.useState(1); const [imageSrc, setImageSrc] = React.useState(""); const [text, setText] = React.useState(""); const [textColor, setTextColor] = React.useState("#000000"); const handleImageChange = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImageSrc(reader.result); setStep(2); }; reader.readAsDataURL(file); } }; const handleTextChange = (e)=>{ setText(e.target.value); }; const handleColorChange = (e)=>{ setTextColor(e.target.value); setStep(4); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center p-4 bg-blue-500 text-white font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "チャット形式で進行"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg mt-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 h-[600px] flex flex-col justify-between items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("form", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "使いたい画像を選択して下さい！"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", accept: "image/*", onChange: handleImageChange, className: "w-3/4 py-2 px-4", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this })), step === 2 && /*#__PURE__*/ React.createElement("form", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "入力したい文字を教えてください！"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "text", value: text, onChange: handleTextChange, className: "w-3/4 py-2 px-4", onBlur: ()=>setStep(3), __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), step === 3 && /*#__PURE__*/ React.createElement("form", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "文字の色を選択して下さい。"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "textColor", value: textColor, onChange: handleColorChange, className: "w-1/4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this })), step === 4 && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, imageSrc && /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "選択した画像", className: "w-full max-w-sm h-64 object-cover mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 28 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", style: { color: textColor }, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, text))))); }