function MainComponent() { const [data, setData] = React.useState([]); React.useEffect(()=>{ fetch("/path/to/your/csvfile.csv").then((response)=>response.text()).then((text)=>{ const parsedData = text.split("\n").slice(1).map((row)=>{ const cols = row.split(","); return { time: cols[0], station: cols[1], destination: cols[2], type: cols[3] }; }); setData(parsedData); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gray-100 flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a73e8] w-full py-4 flex justify-center text-white text-2xl", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "鉄道時刻表"), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-4xl bg-white shadow-md rounded-lg mt-8 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "w-full bg-blue-200 text-left", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "時間"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "駅"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "行先"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "種別"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, row.time), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, row.station), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, row.destination), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, row.type)))))))); }