function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [images, setImages] = React.useState([]); React.useEffect(()=>{ if (searchTerm) { fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchTerm)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setImages(data.items); }); } }, [ searchTerm ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#15202b] text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1b2836] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "🐦 TweetVerse"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search TweetVerse", className: "p-2 rounded-lg bg-[#253341] text-white", onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#1DA1F2] p-2 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("main", { className: "p-4 flex", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 min-h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "sticky top-0 p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-white hover:text-[#1DA1F2]", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-2xl", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, "Home"))), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-white hover:text-[#1DA1F2]", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-2xl", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Explore"))), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-white hover:text-[#1DA1F2]", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-2xl", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "Notifications"))), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-white hover:text-[#1DA1F2]", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-2xl", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Messages")))))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, images.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: image.contextLink, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `Search result ${index + 1}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 min-h-screen", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })))); }