function MainComponent() { const [photos, setPhotos] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const title = formData.get('title'); const description = formData.get('description'); const photo = formData.get('photo'); if (photo) { const photoURL = URL.createObjectURL(photo); const newPhoto = { title, description, photoURL }; setPhotos((prevPhotos)=>[ ...prevPhotos, newPhoto ]); } }; const handlePhotoClick = (photoURL)=>{ window.open(photoURL, "_blank"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "子供の制作作品アプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-6 rounded shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-crimson-text", htmlFor: "title", __source: { fileName: "", lineNumber: 27, 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", id: "title", type: "text", placeholder: "タイトルを入力", name: "title", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-crimson-text", htmlFor: "description", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "説明"), /*#__PURE__*/ React.createElement("textarea", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "description", placeholder: "説明を入力", name: "description", rows: "3", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-crimson-text", htmlFor: "photo", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "写真をアップロード"), /*#__PURE__*/ React.createElement("input", { className: "block w-full text-sm text-gray-700 border border-gray-200 rounded cursor-pointer", id: "photo", type: "file", name: "photo", accept: "image/*", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "保存")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, photos.map((photo, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center cursor-pointer", onClick: ()=>handlePhotoClick(photo.photoURL), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo.photoURL, alt: `学校や家で作った作品 ${index + 1}`, className: "w-[100px] h-[100px] object-cover rounded shadow", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 font-crimson-text", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, photo.title))))); }