function MainComponent() { const users = [ { id: 1, name: "ユーザー1" }, { id: 2, name: "ユーザー2" }, { id: 3, name: "ユーザー3" }, { id: 4, name: "ユーザー4" }, { id: 5, name: "ユーザー5" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between h-screen bg-[#ffffff]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#5f6368] font-roboto hover:underline", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "ユーザー管理")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-th text-[#5f6368] text-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block w-8 h-8 rounded-full overflow-hidden border border-[#5f6368]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./user-profile.jpg", alt: "管理者プロファイルアイコン", className: "object-cover w-full h-full", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#5f6368] font-roboto my-8", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "ユーザの権限変更"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] mx-auto bg-[#fafafa] border border-[#dfe1e5] rounded-lg p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "pb-2 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("th", { className: "pb-2 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "ロール"), /*#__PURE__*/ React.createElement("th", { className: "pb-2 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, users.map((user)=>/*#__PURE__*/ React.createElement("tr", { key: user.id, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("td", { className: "py-2 flex gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: `role${user.id}`, value: "user", className: "border border-[#dfe1e5]", __source: { fileName: "", lineNumber: 40, columnNumber: 23 }, __self: this }), "一般ユーザー"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: `role${user.id}`, value: "admin", className: "border border-[#dfe1e5]", __source: { fileName: "", lineNumber: 44, columnNumber: 23 }, __self: this }), "管理者")), /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#4a90e2] px-4 py-2 rounded-md", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "更新")))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#f2f2f2] p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center text-[#5f6368] font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline px-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "プライバシー"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline px-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "規約"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline px-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "設定")))); }

ユーザー名	ロール	操作
ユーザー1	一般ユーザー管理者
ユーザー2	一般ユーザー管理者
ユーザー3	一般ユーザー管理者
ユーザー4	一般ユーザー管理者
ユーザー5	一般ユーザー管理者