function MainComponent() { const [cartOpen, setCartOpen] = React.useState(false); const [cartItemsCount, setCartItemsCount] = React.useState(0); const [searchResults, setSearchResults] = React.useState([]); const [loading, setLoading] = React.useState(false); const searchInputRef = React.useRef(null); const toggleCart = ()=>setCartOpen(!cartOpen); const handleSearch = async ()=>{ setLoading(true); const query = searchInputRef.current.value; try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`); const data = await response.json(); setSearchResults(data.items); } catch (error) { setSearchResults([]); } setLoading(false); }; let cartContainerClass = "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"; if (!cartOpen) { cartContainerClass += " hidden"; } const handleCartClose = ()=>{ setSearchResults([]); toggleCart(); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1A202C] text-white p-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Shopping"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "search-input", ref: searchInputRef, type: "text", placeholder: "Search products...", className: "p-2 bg-white border rounded border-gray-200", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { name: "search-button", onClick: handleSearch, className: "ml-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { name: "cart-button", onClick: toggleCart, className: "relative text-3xl", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "🛒", /*#__PURE__*/ React.createElement("span", { className: "absolute top-0 right-0 bg-red-600 rounded-full text-white px-2 py-1 text-xs", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, cartItemsCount))), /*#__PURE__*/ React.createElement("div", { className: cartContainerClass, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 p-8 bg-white m-8 rounded-lg shadow-lg min-w-[300px] sm:min-w-[400px] md:min-w-[600px] lg:min-w-[800px]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Your Cart"), searchResults.length > 0 ? /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", className: "text-blue-500 hover:underline", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, item.snippet)))) : /*#__PURE__*/ React.createElement("p", { className: "mb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Your cart is empty!"), /*#__PURE__*/ React.createElement("button", { name: "close-button", onClick: handleCartClose, className: "bg-[#FF6B6B] text-white px-4 py-2 rounded hover:bg-[#FF4757]", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Close")))); }