function MainComponent() { const [doorColor, setDoorColor] = React.useState("red"); const [doorImage, setDoorImage] = React.useState(null); function handleColorChange(event) { setDoorColor(event.target.value); } function handleImageChange(event) { setDoorImage(URL.createObjectURL(event.target.files[0])); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "エレベーターの扉カスタマイズ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] bg-white shadow-md rounded-lg p-8", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "door-color", className: "block text-gray-700", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "扉の色を選択してください"), /*#__PURE__*/ React.createElement("select", { id: "door-color", name: "door-color", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", value: doorColor, onChange: handleColorChange, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "red", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "赤"), /*#__PURE__*/ React.createElement("option", { value: "blue", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "青"), /*#__PURE__*/ React.createElement("option", { value: "green", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "緑"), /*#__PURE__*/ React.createElement("option", { value: "yellow", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "黄"), /*#__PURE__*/ React.createElement("option", { value: "white", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "白"), /*#__PURE__*/ React.createElement("option", { value: "black", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "黒"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "door-image", className: "block text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "画像ファイルを選択してください"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "door-image", name: "door-image", accept: "image/*", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", onChange: handleImageChange, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "更新"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] mt-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, doorImage ? /*#__PURE__*/ React.createElement("img", { src: doorImage, alt: "ユーザーがアップロードしたエレベーターの画像", className: "w-full", style: { backgroundColor: doorColor }, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px]", style: { backgroundColor: doorColor }, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }))); }