function ExcelFileUploader({ name, accept, className, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "file", name: name, accept: accept, className: `block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${className}`, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ExcelFileUploaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ExcelFileUploader, { name: "excelFile", accept: ".xlsx, .xls", className: "", onChange: (e)=>console.log(e.target.files), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function Component({ onFileChange }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "excelFile", accept: ".xlsx, .xls", className: "block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", onChange: onFileChange, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-2 px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75", onClick: onFileChange, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "実行する")); } function ComponentStory() { const handleFileChange = (event)=>{ const file = event.target.files[0]; console.log(file); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { onFileChange: handleFileChange, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tableData, setTableData] = React.useState([]); const [headers, setHeaders] = React.useState([]); const handleFileUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event)=>{ const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, { type: 'array' }); const firstSheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[firstSheetName]; const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); setHeaders(jsonData[0]); setTableData(jsonData.slice(1)); }; reader.readAsArrayBuffer(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "エクセルの表アップローダー"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] bg-white rounded-lg shadow p-6 space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { onFileChange: handleFileUpload, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, headers.length > 0 && /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white rounded-lg shadow mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, headers.map((header, index)=>{ const cellClass = "px-4 py-2 border"; return /*#__PURE__*/ React.createElement("th", { key: index, className: cellClass, __source: { fileName: "", lineNumber: 34, columnNumber: 28 }, __self: this }, header); }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, tableData.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, row.map((cell, cellIndex)=>{ const cellClass = "px-4 py-2 border"; return /*#__PURE__*/ React.createElement("td", { key: cellIndex, className: cellClass, __source: { fileName: "", lineNumber: 43, columnNumber: 30 }, __self: this }, cell); })))))))); }