function MainComponent() { const [formData, setFormData] = React.useState({ name: '', address: '', phone: '' }); const [isSubmitted, setIsSubmitted] = React.useState(false); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setIsSubmitted(true); }; const flowerName = formData.name ? 'flower-name' : ''; const flowerAddress = formData.address ? 'flower-address' : ''; const flowerPhone = formData.phone ? 'flower-phone' : ''; const showThanksMessage = isSubmitted && formData.name && formData.address && formData.phone; return /*#__PURE__*/ React.createElement("div", { className: "p-8 relative bg-white", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", value: formData.name, onChange: handleChange, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: flowerName + " block text-green-500", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, formData.name && "素晴らしい名前ですね！")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "住所"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", id: "address", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", value: formData.address, onChange: handleChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: flowerAddress + " block text-green-500", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, formData.address && "素晴らしい住所ですね！")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "電話番号"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "phone", id: "phone", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", value: formData.phone, onChange: handleChange, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: flowerPhone + " block text-green-500", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, formData.phone && "素晴らしい電話番号ですね！")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "保存ボタン")), /*#__PURE__*/ React.createElement("div", { className: `thanks-message ${showThanksMessage ? 'block' : 'hidden'} mt-8 text-center`, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "ご記入頂いた情報に感謝いたします！"), /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/bouquet.jpg", alt: "A beautiful bouquet of flowers", className: "mx-auto w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` .flower-name:after, .flower-address:after, .flower-phone:after { content: ""; position: absolute; top: 50%; left: 50%; background-image: url('relative/path/to/flower.png'); background-size: cover; width: 50px; height: 50px; transform: translate(-50%, -50%); opacity: 0; animation: bloom 0.5s ease-in-out forwards; } .flower-address:after { background-image: url('relative/path/to/flower2.png'); } .flower-phone:after { background-image: url('relative/path/to/flower3.png'); } @keyframes bloom { from { opacity: 0; transform: scale(0.5) translate(-50%, -50%); } to { opacity: 1; transform: scale(1) translate(-50%, -50%); } } .thanks-message { display: none; } .thanks-message.block { display: block; } `)); }