function MainComponent() { const [imagePreview, setImagePreview] = React.useState(null); const [email, setEmail] = React.useState(""); const [imageFile, setImageFile] = React.useState(null); const [downloadUrl, setDownloadUrl] = React.useState(""); const handleFileChange = (e)=>{ const file = e.target.files[0]; setImageFile(file); const reader = new FileReader(); reader.onloadend = ()=>{ setImagePreview(reader.result); }; if (file) { reader.readAsDataURL(file); } }; const handleSubmit = (e)=>{ e.preventDefault(); // Placeholder for submission logic // Use email, imageFile, and downloadUrl for submission }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "葬儀の遺影を作るサービス"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-[400px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "image-upload", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "画像をアップロード"), /*#__PURE__*/ React.createElement("input", { className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", type: "file", name: "image", id: "image-upload", onChange: handleFileChange, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "email", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", type: "email", name: "email", id: "email", value: email, onChange: (e)=>setEmail(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "download-url", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "ダウンロードURL"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", type: "text", name: "downloadUrl", id: "download-url", value: downloadUrl, onChange: (e)=>setDownloadUrl(e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "画像を送信")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "プレビュー画像"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-md w-[400px] h-[400px] flex items-center justify-center", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, imagePreview ? /*#__PURE__*/ React.createElement("img", { src: imagePreview, alt: "遺影のプレビュー画像", className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "./placeholder.png", alt: "遺影のプレビュー画像 (プレースホルダー)", className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-2", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "ダウンロードへ"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "再制作")))); }