function MainComponent() { const [formData, setFormData] = React.useState({ name: "", nameRating: 1, occupation: "", occupationRating: 1, education: "", educationRating: 1, hobby: "", hobbyRating: 1 }); const [submitted, setSubmitted] = React.useState(false); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setSubmitted(true); }; const textSize = (rating)=>`text-${rating * 2}xl`; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gray-100 p-4 font-sans", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, !submitted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "自己紹介カード"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded shadow-md w-full max-w-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: formData.name, onChange: handleChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((score)=>/*#__PURE__*/ React.createElement("label", { key: score, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "nameRating", value: score, checked: formData.nameRating == score, onChange: handleChange, __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, score))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "occupation", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "職業"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "occupation", id: "occupation", value: formData.occupation, onChange: handleChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((score)=>/*#__PURE__*/ React.createElement("label", { key: score, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "occupationRating", value: score, checked: formData.occupationRating == score, onChange: handleChange, __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, score))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "education", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "学歴"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "education", id: "education", value: formData.education, onChange: handleChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((score)=>/*#__PURE__*/ React.createElement("label", { key: score, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "educationRating", value: score, checked: formData.educationRating == score, onChange: handleChange, __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, score))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hobby", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "趣味"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "hobby", id: "hobby", value: formData.hobby, onChange: handleChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((score)=>/*#__PURE__*/ React.createElement("label", { key: score, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "hobbyRating", value: score, checked: formData.hobbyRating == score, onChange: handleChange, __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, score))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "送信"))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-lg text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: textSize(formData.nameRating), __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, formData.name), /*#__PURE__*/ React.createElement("div", { className: textSize(formData.occupationRating), __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, formData.occupation), /*#__PURE__*/ React.createElement("div", { className: textSize(formData.educationRating), __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, formData.education), /*#__PURE__*/ React.createElement("div", { className: textSize(formData.hobbyRating), __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, formData.hobby))); }