function MainComponent() { const [products, setProducts] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSearchSubmit = async (event)=>{ event.preventDefault(); await fetchAndUpdateProducts(); }; const fetchAndUpdateProducts = async ()=>{ const scrapedProducts = await scrapeYoutubeAndSearchAmazon(searchTerm); setProducts(scrapedProducts); }; React.useEffect(()=>{ const intervalId = setInterval(()=>{ if (searchTerm !== '') { fetchAndUpdateProducts(); } }, 60000); return ()=>clearInterval(intervalId); }, [ searchTerm ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] mb-10", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "テックブックランク"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "mb-10 w-full max-w-md", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b-2 border-[#333] py-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchTerm", value: searchTerm, onChange: handleSearchChange, className: "flex-1 px-4 py-2 w-full bg-transparent outline-none", placeholder: "テックアイテムを検索", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#007BFF] hover:bg-[#0056b3] text-white rounded transition duration-300", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "検索"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "overflow-hidden shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name} product`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-3", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-3", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("a", { href: product.affiliateLink, target: "_blank", rel: "noopener noreferrer", className: "inline-block px-6 py-2 bg-[#FFC107] hover:bg-[#FFCA28] text-white font-semibold rounded transition duration-300", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Amazonで見る"))))))); }