function MainComponent() { const [books, setBooks] = React.useState([ { totalSales: 3000, title: "風の谷のナウシカ", author: "宮崎駿", publisherName: "徳間書店", salesDate: "1983-02", itemPrice: 400, category1: "ファンタジー", category2: "漫画", category3: "文学" }, { totalSales: 1500, title: "魔女の宅急便", author: "角野栄子", publisherName: "福音館書店", salesDate: "1985-07", itemPrice: 350, category1: "ファンタジー", category2: "児童文学", category3: "冒険" } ]); const handleSubmit = (e)=>{ e.preventDefault(); }; const searchInputs = /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "salesMin", placeholder: "売上累計以上", className: "input input-bordered input-primary w-56", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "salesMax", placeholder: "売上累計以下", className: "input input-bordered input-primary w-56", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "タイトル", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "author", placeholder: "著者名", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "publisherName", placeholder: "出版社名", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "month", name: "salesDateStart", placeholder: "発売日以降", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "month", name: "salesDateEnd", placeholder: "発売日以前", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "itemPriceMin", placeholder: "本体価格以上", className: "input input-bordered input-primary w-56", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "itemPriceMax", placeholder: "本体価格以下", className: "input input-bordered input-primary w-56", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "category", placeholder: "棚名称", className: "input input-bordered input-primary w-full max-w-xs", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "btn btn-primary", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "検索")); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, searchInputs, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto relative shadow-md sm:rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500 table-auto border-collapse", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-800 text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "売上累計"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", style: { display: 'none' }, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "ISBN"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "著者名"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "出版社名"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "発売日"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "本体価格"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "棚名称1"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "棚名称2"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "棚名称3"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, books.map((book, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-100", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, book.totalSales), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, book.author), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, book.publisherName), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, book.salesDate), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "¥", book.itemPrice), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, book.category1), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, book.category2), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, book.category3))))))); }

売上累計	ISBN	タイトル	著者名	出版社名	発売日	本体価格	棚名称1	棚名称2	棚名称3
3000	風の谷のナウシカ	宮崎駿	徳間書店	1983-02	¥400	ファンタジー	漫画	文学
1500	魔女の宅急便	角野栄子	福音館書店	1985-07	¥350	ファンタジー	児童文学	冒険