function MainComponent() { const [errors, setErrors] = React.useState({}); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const data = { name: formData.get("name"), email: formData.get("email"), message: formData.get("message") }; const newErrors = {}; if (!data.name) newErrors.name = "名前は必須です。"; if (!data.email) newErrors.email = "メールは必須です。"; if (!data.message) newErrors.message = "メッセージは必須です。"; if (!formData.get("inquiry")) newErrors.inquiry = "少なくとも1つの問い合わせ内容を選択してください。"; setErrors(newErrors); if (Object.keys(newErrors).length === 0) { console.log(data); } }; const inputStyle = (field)=>`w-full px-3 py-2 border rounded-md ${errors[field] ? 'border-red-500' : 'border-gray-300'}`; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-100 min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-full max-w-[400px]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "お問い合わせフォーム"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", htmlFor: "name", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: inputStyle('name'), placeholder: "あなたの名前", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), errors.name && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs mt-1", __source: { fileName: "", lineNumber: 44, columnNumber: 29 }, __self: this }, errors.name)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", htmlFor: "email", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: inputStyle('email'), placeholder: "あなたのメール", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), errors.email && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs mt-1", __source: { fileName: "", lineNumber: 55, columnNumber: 30 }, __self: this }, errors.email)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", htmlFor: "message", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", className: inputStyle('message'), rows: "4", placeholder: "メッセージを入力してください", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), errors.message && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs mt-1", __source: { fileName: "", lineNumber: 66, columnNumber: 32 }, __self: this }, errors.message)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "お問い合わせ内容"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "mr-2", type: "checkbox", id: "inquiry1", name: "inquiry", value: "仕事の問い合わせ", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "inquiry1", className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "仕事の問い合わせ")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "mr-2", type: "checkbox", id: "inquiry2", name: "inquiry", value: "一般の問い合わせ", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "inquiry2", className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "一般の問い合わせ")), errors.inquiry && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs mt-1", __source: { fileName: "", lineNumber: 78, columnNumber: 32 }, __self: this }, errors.inquiry)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded-md", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "送信")))); }