function MainComponent() { const [formData, setFormData] = React.useState({ contributor: "", title: "", reference: "", fundingRate: "", summary: "" }); const [projects, setProjects] = React.useState([]); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = (event)=>{ event.preventDefault(); const isEmpty = Object.values(formData).some((x)=>x.trim() === ""); if (!isEmpty) { setProjects([ ...projects, formData ]); setFormData({ contributor: "", title: "", reference: "", fundingRate: "", summary: "" }); } }; const sortProjects = (field)=>{ const sortedProjects = [ ...projects ].sort((a, b)=>{ if (field === "fundingRate") { return Number(a[field]) - Number(b[field]); } return a[field].localeCompare(b[field]); }); setProjects(sortedProjects); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#F5F5F5] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full h-[60px] flex items-center justify-between px-4 bg-[#008080] text-white", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "プロジェクト管理")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-4 grid grid-cols-1 gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "contributor", value: formData.contributor, onChange: handleChange, placeholder: "入力者名", className: "w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-[#008080]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: formData.title, onChange: handleChange, placeholder: "案件名", className: "w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-[#008080]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", name: "reference", value: formData.reference, onChange: handleChange, placeholder: "リファ(url)", className: "w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-[#008080]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fundingRate", value: formData.fundingRate, onChange: handleChange, placeholder: "資金調達率", className: "w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-[#008080]", pattern: "\\d*", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "summary", value: formData.summary, onChange: handleChange, placeholder: "概要", className: "w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-[#008080]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#008080] text-white rounded hover:bg-[#004C4C] transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "投稿")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>sortProjects('contributor'), className: "px-2 py-1 bg-[#008080] text-white rounded hover:bg-[#004C4C]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "入力者名でソート"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sortProjects('title'), className: "px-2 py-1 bg-[#008080] text-white rounded hover:bg-[#004C4C]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "案件名でソート"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sortProjects('fundingRate'), className: "px-2 py-1 bg-[#008080] text-white rounded hover:bg-[#004C4C]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "資金調達率でソート"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sortProjects('summary'), className: "px-2 py-1 bg-[#008080] text-white rounded hover:bg-[#004C4C]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "概要でソート")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, projects.map((project, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white shadow rounded p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 69, columnNumber: 52 }, __self: this }, "入力者名:"), " ", project.contributor), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 70, columnNumber: 52 }, __self: this }, "案件名:"), " ", project.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 71, columnNumber: 52 }, __self: this }, "リファレンス URL:"), " ", /*#__PURE__*/ React.createElement("a", { href: project.reference, className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 71, columnNumber: 81 }, __self: this }, project.reference)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 72, columnNumber: 52 }, __self: this }, "資金調達率:"), " ", project.fundingRate, "%"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 73, columnNumber: 52 }, __self: this }, "概要:"), " ", project.summary)))))); }