function MainComponent() { const names = [ "山田太郎", "鈴木一郎", "佐藤花子", "高橋次郎" ]; const genders = [ "男性", "女性" ]; const prefectures = [ "北海道", "東京都", "大阪府", "福岡県" ]; const qualifications = [ "ITパスポート", "基本情報技術者", "応用情報技術者", "プロジェクトマネージャ" ]; const randomDate = ()=>{ const start = new Date(2020, 0, 1); const end = new Date(); const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`; }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "選択"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "居住都道府県"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "所有資格"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "最終ログイン日時"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "編集"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, Array.from({ length: 4 }).map((_, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-t border-gray-200", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `check-${index}`, __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, names[Math.floor(Math.random() * names.length)]), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, genders[Math.floor(Math.random() * genders.length)]), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, prefectures[Math.floor(Math.random() * prefectures.length)]), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, qualifications[Math.floor(Math.random() * qualifications.length)]), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, randomDate()), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#1D4ED8] hover:text-[#1E40AF]", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "編集")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` .container { animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }

氏名	性別	居住都道府県	所有資格	最終ログイン日時
佐藤花子	女性	大阪府	プロジェクトマネージャ	2024-03-20 21:12:14
山田太郎	男性	大阪府	プロジェクトマネージャ	2023-10-23 06:08:09
山田太郎	男性	東京都	プロジェクトマネージャ	2021-01-18 05:37:42
山田太郎	女性	大阪府	ITパスポート	2024-09-14 03:31:47