function MainComponent({ data }) { const getStatusColor = (status)=>{ switch(status){ case '未承認': return 'text-red-500'; case '承認中': return 'text-yellow-500'; case '承認済': return 'text-green-500'; default: return 'text-gray-500'; } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full leading-normal", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "ステータス"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "勤務先"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "更新日"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 bg-gray-100", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: `px-5 py-3 border-b border-gray-200 ${getStatusColor(row.status)}`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, row.status), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-3 border-b border-gray-200", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 whitespace-no-wrap", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, row.furigana), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 whitespace-no-wrap", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, row.name))), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-3 border-b border-gray-200", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 whitespace-no-wrap", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, row.company)), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-3 border-b border-gray-200", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 whitespace-no-wrap", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, row.updatedAt)), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-3 border-b border-gray-200 text-right text-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "編集"))))))); } function StoryComponent() { const exampleData = [ { status: '未承認', furigana: 'やまだたろう', name: '山田太郎', company: '株式会社サンプル', updatedAt: '2022-08-20' }, { status: '承認中', furigana: 'すずきはなこ', name: '鈴木花子', company: '有限会社テスト', updatedAt: '2023-01-15' }, { status: '承認済', furigana: 'たかはしじろう', name: '高橋次郎', company: '合同会社デモ', updatedAt: '2022-12-08' } ]; return /*#__PURE__*/ React.createElement(MainComponent, { data: exampleData, __source: { fileName: "", lineNumber: 79, columnNumber: 10 }, __self: this }); }

ステータス	氏名	勤務先	更新日
未承認	やまだたろう山田太郎	株式会社サンプル	2022-08-20
承認中	すずきはなこ鈴木花子	有限会社テスト	2023-01-15
承認済	たかはしじろう高橋次郎	合同会社デモ	2022-12-08