function MainComponent() { const [data, setData] = React.useState([]); const [currentScan, setCurrentScan] = React.useState({ id: "", name: "", serial: "" }); const [inputQR, setInputQR] = React.useState(""); const handleAddItem = ()=>{ const newItem = { qr: inputQR, id: Date.now().toString(), name: `Name-${Math.random()}`, serial: `${Math.floor(1000 + Math.random() * 9000)}` }; setData([ ...data, newItem ]); setInputQR(""); // Clear input after adding }; const handleDeleteItem = (id)=>{ setData(data.filter((item)=>item.id !== id)); }; const handleQRScan = (qrContent)=>{ const scannedData = data.find((item)=>item.qr === qrContent); if (scannedData) { setCurrentScan({ id: scannedData.id, name: scannedData.name, serial: scannedData.serial }); } else { setCurrentScan({ id: "", name: "対応するデータが見つかりません", serial: "" }); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "管理画面"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "QRコードを入力", className: "p-2 border border-gray-300 rounded mr-4", name: "addItemInput", value: inputQR, onChange: (e)=>setInputQR(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", onClick: handleAddItem, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, "QRコード"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "ID"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "連番"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-3 px-6", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, row.qr), /*#__PURE__*/ React.createElement("td", { className: "py-3 px-6", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, row.id), /*#__PURE__*/ React.createElement("td", { className: "py-3 px-6", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, row.name), /*#__PURE__*/ React.createElement("td", { className: "py-3 px-6", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, row.serial), /*#__PURE__*/ React.createElement("td", { className: "py-3 px-6", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-1 bg-red-500 text-white rounded", onClick: ()=>handleDeleteItem(row.id), __source: { fileName: "", lineNumber: 74, columnNumber: 23 }, __self: this }, "削除")))))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "フロント画面"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "QRコードを読み取ってください。"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "QRコードを入力", className: "p-2 border border-gray-300 rounded mb-4", name: "qrInput", onChange: (e)=>handleQRScan(e.target.value), __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 99, columnNumber: 40 }, __self: this }, "ID:"), " ", currentScan.id), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 100, columnNumber: 40 }, __self: this }, "名前:"), " ", currentScan.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 101, columnNumber: 40 }, __self: this }, "連番:"), " ", currentScan.serial)))))); }