function MainComponent() { const [departments, setDepartments] = React.useState([ "マーケティング", "営業" ]); const [qualifications, setQualifications] = React.useState([ "プロジェクトマネージャー", "データサイエンティスト" ]); const [conditions, setConditions] = React.useState([ "フルタイム", "パートタイム" ]); const [newDepartment, setNewDepartment] = React.useState(""); const [newQualification, setNewQualification] = React.useState(""); const [newCondition, setNewCondition] = React.useState(""); const handleDepartmentSubmit = (e)=>{ e.preventDefault(); if (newDepartment) { setDepartments([ ...departments, newDepartment ]); setNewDepartment(""); } }; const handleQualificationSubmit = (e)=>{ e.preventDefault(); if (newQualification) { setQualifications([ ...qualifications, newQualification ]); setNewQualification(""); } }; const handleConditionSubmit = (e)=>{ e.preventDefault(); if (newCondition) { setConditions([ ...conditions, newCondition ]); setNewCondition(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans p-4 w-full h-full flex flex-col items-center bg-gray-100 space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "部署と資格と勤務条件の管理"), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "部署の登録"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleDepartmentSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-600", htmlFor: "departmentName", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "部署名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "departmentName", name: "departmentName", type: "text", placeholder: "例: マーケティング", value: newDepartment, onChange: (e)=>setNewDepartment(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-blue-500 text-white rounded-md", type: "submit", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "登録"))), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "資格の登録"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleQualificationSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-600", htmlFor: "qualificationName", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "資格名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "qualificationName", name: "qualificationName", type: "text", placeholder: "例: プロジェクトマネージャー", value: newQualification, onChange: (e)=>setNewQualification(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-green-500 text-white rounded-md", type: "submit", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "登録"))), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-700", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "勤務条件の登録"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleConditionSubmit, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-600", htmlFor: "conditionName", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "勤務条件名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "conditionName", name: "conditionName", type: "text", placeholder: "例: フルタイム", value: newCondition, onChange: (e)=>setNewCondition(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-red-500 text-white rounded-md", type: "submit", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "登録"))), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] p-4 bg-white shadow-md rounded-md space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-700", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "登録済みの部署と資格と勤務条件"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "部署"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, departments.map((department, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, department)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "資格"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, qualifications.map((qualification, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, qualification)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "勤務条件"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, conditions.map((condition, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, condition)))))); }