function MainComponent() { const [perPage, setPerPage] = React.useState(25); const [currentPage, setCurrentPage] = React.useState(1); const [searchResults, setSearchResults] = React.useState([]); const [totalResults, setTotalResults] = React.useState(0); React.useEffect(()=>{ initializeDatabase(); }, []); const initializeDatabase = async ()=>{ await fetch('/api/db/test-890', { method: 'POST', body: JSON.stringify({ query: `CREATE TABLE IF NOT EXISTS products ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, price INTEGER, release_date DATE, category TEXT, manufacturer TEXT, image TEXT, features TEXT )` }) }); const sampleProducts = [ { name: 'コカ・コーラ', price: 120, release_date: '2023-04-01', category: '炭酸飲料', manufacturer: 'コカ・コーラ', image: '/coca-cola.jpg', features: '炭酸、カフェイン' }, { name: 'アサヒスーパードライ', price: 220, release_date: '2023-03-15', category: 'ビール', manufacturer: 'アサヒ', image: '/asahi-superdry.jpg', features: 'アルコール、すっきり' }, { name: 'サントリー天然水', price: 100, release_date: '2023-05-01', category: '水', manufacturer: 'サントリー', image: '/suntory-water.jpg', features: 'ミネラル、天然水' }, { name: 'ファンタオレンジ', price: 130, release_date: '2023-06-01', category: '炭酸飲料', manufacturer: 'コカ・コーラ', image: '/fanta-orange.jpg', features: '炭酸、オレンジ' }, { name: 'アサヒ十六茶', price: 110, release_date: '2023-07-01', category: 'お茶', manufacturer: 'アサヒ', image: '/asahi-jurokucha.jpg', features: 'ブレンド茶、カフェインゼロ' } ]; for (const product of sampleProducts){ await fetch('/api/db/test-890', { method: 'POST', body: JSON.stringify({ query: `INSERT INTO products (name, price, release_date, category, manufacturer, image, features) VALUES (?, ?, ?, ?, ?, ?, ?)`, values: [ product.name, product.price, product.release_date, product.category, product.manufacturer, product.image, product.features ] }) }); } }; const handleSearch = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const searchParams = Object.fromEntries(formData.entries()); let query = 'SELECT * FROM products WHERE 1=1'; const values = []; if (searchParams.productName) { query += ' AND name LIKE ?'; values.push(`%${searchParams.productName}%`); } if (searchParams.manufacturer) { query += ' AND manufacturer = ?'; values.push(searchParams.manufacturer); } if (searchParams.releaseDateFrom) { query += ' AND release_date >= ?'; values.push(searchParams.releaseDateFrom); } if (searchParams.releaseDateTo) { query += ' AND release_date <= ?'; values.push(searchParams.releaseDateTo); } if (searchParams.priceRange) { const [min, max] = getPriceRange(searchParams.priceRange); query += ' AND price >= ? AND price <= ?'; values.push(min, max); } if (searchParams.features) { query += ' AND features LIKE ?'; values.push(`%${searchParams.features}%`); } if (searchParams.category) { query += ' AND category = ?'; values.push(searchParams.category); } const response = await fetch('/api/db/test-890', { method: 'POST', body: JSON.stringify({ query, values }) }); const results = await response.json(); setSearchResults(results); setTotalResults(results.length); setCurrentPage(1); }; const getPriceRange = (range)=>{ switch(range){ case '～100円': return [ 0, 100 ]; case '101円～200円': return [ 101, 200 ]; case '201円～300円': return [ 201, 300 ]; case '301円～': return [ 301, Infinity ]; default: return [ 0, Infinity ]; } }; const handlePerPageChange = (event)=>{ setPerPage(Number(event.target.value)); setCurrentPage(1); }; const pageCount = Math.ceil(totalResults / perPage); const paginatedResults = searchResults.slice((currentPage - 1) * perPage, currentPage * perPage); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 p-4 md:p-8 font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold text-center py-4 md:py-6 bg-gradient-to-r from-blue-600 to-purple-600 text-white", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "飲料水商品検索"), /*#__PURE__*/ React.createElement("form", { className: "p-4 md:p-6 space-y-4 md:space-y-6", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "productName", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "productName", name: "productName", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "manufacturer", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "メーカー名"), /*#__PURE__*/ React.createElement("select", { id: "manufacturer", name: "manufacturer", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "メーカーを選択"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "アサヒ"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "コカ・コーラ"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "サントリー"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "発売日範囲"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "releaseDateFrom", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "self-center", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "～"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "releaseDateTo", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "priceRange", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, "価格帯"), /*#__PURE__*/ React.createElement("select", { id: "priceRange", name: "priceRange", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "価格帯を選択"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, "～100円"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "101円～200円"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, "201円～300円"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, "301円～"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "features", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "商品の特徴"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "features", name: "features", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "category", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "カテゴリー"), /*#__PURE__*/ React.createElement("select", { id: "category", name: "category", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "カテゴリーを選択"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "炭酸飲料"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "ビール"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "水"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "お茶")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-md shadow-md hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "検索"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-6", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-4", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-semibold text-gray-800 mb-2 md:mb-0", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "perPage", className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, "表示件数:"), /*#__PURE__*/ React.createElement("select", { id: "perPage", name: "perPage", value: perPage, onChange: handlePerPageChange, className: "rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: 25, __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "25"), /*#__PURE__*/ React.createElement("option", { value: 50, __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "50"), /*#__PURE__*/ React.createElement("option", { value: 100, __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, "100")))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, "商品画像"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, "販売価格"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, "発売日"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, "カテゴリー"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, "メーカー名"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, paginatedResults.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.id, __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name}の商品画像`, className: "h-12 w-12 md:h-16 md:w-16 rounded-md object-cover", __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 214, columnNumber: 23 }, __self: this }, product.name)), /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this }, "¥", product.price.toLocaleString())), /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 219, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 220, columnNumber: 23 }, __self: this }, product.release_date)), /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800", __source: { fileName: "", lineNumber: 223, columnNumber: 23 }, __self: this }, product.category)), /*#__PURE__*/ React.createElement("td", { className: "px-4 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 227, columnNumber: 21 }, __self: this }, product.manufacturer)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-col md:flex-row items-center justify-between", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 md:mb-0", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "全 ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, totalResults), " 件中", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, Math.min((currentPage - 1) * perPage + 1, totalResults)), " -", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, Math.min(currentPage * perPage, totalResults)), " 件を表示")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "relative z-0 inline-flex rounded-md shadow-sm -space-x-px", "aria-label": "Pagination", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(Math.max(1, currentPage - 1)), disabled: currentPage === 1, className: "relative inline-flex items-center px-2 py-2 rounded-l-md border border", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }))))))); }