function MainComponent() { const [employees, setEmployees] = React.useState([]); const [searchQuery, setSearchQuery] = React.useState(""); const [formValues, setFormValues] = React.useState({ name: "", department: "", employeeId: "", logos: [] }); const logos = [ { id: "QMS", name: "ISO9001", imagePath: "iso9001.png" }, { id: "EMS", name: "ISO14001", imagePath: "iso14001.png" }, { id: "OMS", name: "OMS", imagePath: "oms.png" } ]; const filteredEmployees = employees.filter((employee)=>employee.name.includes(searchQuery)); const handleInputChange = (e)=>{ const { name, value, checked, type } = e.target; if (type === "checkbox") { setFormValues((prevValues)=>({ ...prevValues, logos: checked ? [ ...prevValues.logos, value ] : prevValues.logos.filter((logo)=>logo !== value) })); } else { setFormValues((prevValues)=>({ ...prevValues, [name]: value })); } }; const handleSubmit = ()=>{ setEmployees([ ...employees, formValues ]); setFormValues({ name: "", department: "", employeeId: "", logos: [] }); }; const handleDelete = (id)=>{ setEmployees(employees.filter((employee)=>employee.employeeId !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "社員名刺ロゴ確認"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "border p-2 rounded w-full max-w-md", placeholder: "社員氏名を検索", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, filteredEmployees.map((employee)=>/*#__PURE__*/ React.createElement("div", { key: employee.employeeId, className: "border p-4 rounded shadow", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, employee.name), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "所属部署: ", employee.department), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "社員番号: ", employee.employeeId), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, employee.logos.map((logoId)=>{ const logo = logos.find((l)=>l.id === logoId); return /*#__PURE__*/ React.createElement("img", { key: logoId, src: logo.imagePath, alt: logo.name, className: "w-[60px] h-[60px]", __source: { fileName: "", lineNumber: 57, columnNumber: 24 }, __self: this }); })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(employee.employeeId), className: "text-red-500 mt-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "削除")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "管理画面"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formValues.name, onChange: handleInputChange, className: "border p-2 rounded w-full", placeholder: "氏名", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "department", value: formValues.department, onChange: handleInputChange, className: "border p-2 rounded w-full", placeholder: "所属部署", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "employeeId", value: formValues.employeeId, onChange: handleInputChange, className: "border p-2 rounded w-full", placeholder: "社員番号", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, logos.map((logo)=>/*#__PURE__*/ React.createElement("div", { key: logo.id, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "logos", value: logo.id, checked: formValues.logos.includes(logo.id), onChange: handleInputChange, __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, logo.name)))), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "追加")))); }