function MainComponent() { const [fields, setFields] = React.useState([ { id: 1, name: 'name', label: '名前', type: 'text', required: true, placeholder: '例：山田太郎' }, { id: 2, name: 'email', label: 'メールアドレス', type: 'email', required: true, pattern: ".+@.+\\..+", placeholder: "example@example.com" }, { id: 3, name: 'organization', label: '団体名', type: 'text', required: true, placeholder: '例：株式会社例' }, { id: 4, name: 'position', label: '役職', type: 'text', required: false, placeholder: '例：マネージャー' }, { id: 5, name: 'eventName', label: 'イベント名', type: 'text', required: true, placeholder: '例：大規模テックカンファレンス' }, { id: 6, name: 'eventDate', label: 'イベント日', type: 'date', required: true } ]); const [formData, setFormData] = React.useState({}); const handleChange = (event)=>{ const { name, value } = event.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleFieldChange = (event, fieldId)=>{ const { name, value } = event.target; setFields(fields.map((field)=>field.id === fieldId ? { ...field, [name]: value } : field)); }; const handleSubmit = (event)=>{ event.preventDefault(); alert('送信完了'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-5 h-full overflow-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none", onClick: ()=>setFields(fields.concat({ id: fields.length > 0 ? Math.max(...fields.map((field)=>field.id)) + 1 : 1, name: '', label: '', type: 'text', required: false })), __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "項目を追加"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, fields.map((field)=>/*#__PURE__*/ React.createElement("div", { key: field.id, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "label", value: field.label, onChange: (e)=>handleFieldChange(e, field.id), className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", placeholder: "項目名", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: field.type, name: field.name, value: formData[field.name] || '', onChange: handleChange, className: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", required: field.required, placeholder: field.placeholder || '', pattern: field.pattern || undefined, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "送信")))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-5 h-full overflow-auto bg-gray-100", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "HTML プレビュー"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, fields.map((field)=>/*#__PURE__*/ React.createElement("div", { key: field.id, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, field.label, ": ", /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 55, columnNumber: 79 }, __self: this }, formData[field.name] || ''))))))); }