function MainComponent() { const [searchParams, setSearchParams] = React.useState({ productName: "", productCategory: "雑貨", registrationDateFrom: "", registrationDateTo: "" }); const [products, setProducts] = React.useState([ { name: "商品1", category: "雑貨", price: 1000 }, { name: "商品2", category: "服", price: 2000 } ]); const [currentPage, setCurrentPage] = React.useState(1); const productsPerPage = 10; const handleSearchChange = (e)=>{ setSearchParams({ ...searchParams, [e.target.name]: e.target.value }); }; const switchPage = (page)=>{ setCurrentPage(page); }; const totalPages = Math.ceil(products.length / productsPerPage); const displayedProducts = products.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage); return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "検索条件"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", value: searchParams.productName, onChange: handleSearchChange, className: "w-full p-2 border font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "商品分類"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "productCategory", value: "雑貨", checked: searchParams.productCategory === "雑貨", onChange: handleSearchChange, className: "mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), "雑貨"), /*#__PURE__*/ React.createElement("label", { className: "mr-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "productCategory", value: "服", checked: searchParams.productCategory === "服", onChange: handleSearchChange, className: "mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), "服"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "productCategory", value: "装飾品", checked: searchParams.productCategory === "装飾品", onChange: handleSearchChange, className: "mr-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), "装飾品"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "登録日付 From"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "registrationDateFrom", value: searchParams.registrationDateFrom, onChange: handleSearchChange, className: "w-full p-2 border font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "登録日付 To"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "registrationDateTo", value: searchParams.registrationDateTo, onChange: handleSearchChange, className: "w-full p-2 border font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-3 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, displayedProducts.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center p-4 border mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, product.category), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "¥", product.price), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-green-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "編集")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, Array.from({ length: totalPages }, (_, i)=>/*#__PURE__*/ React.createElement("button", { key: i, className: `p-2 mx-1 ${currentPage === i + 1 ? "bg-blue-500 text-white" : "bg-gray-300"}`, onClick: ()=>switchPage(i + 1), __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, i + 1))))); }