function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [videos, setVideos] = React.useState([]); const handleSearch = ()=>{ const relatedVideos = [ { id: 1, title: `${searchTerm} Video 1`, channel: `${searchTerm} Channel 1`, thumbnail: "./thumbnail1.jpg" }, { id: 2, title: `${searchTerm} Video 2`, channel: `${searchTerm} Channel 2`, thumbnail: "./thumbnail2.jpg" }, { id: 3, title: `${searchTerm} Video 3`, channel: `${searchTerm} Channel 3`, thumbnail: "./thumbnail3.jpg" }, { id: 4, title: `${searchTerm} Video 4`, channel: `${searchTerm} Channel 4`, thumbnail: "./thumbnail4.jpg" } ]; setVideos(relatedVideos); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#cc0000] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "MyTube")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "p-2 rounded w-[300px]", placeholder: "Search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e62117] px-4 py-2 rounded text-white", onClick: handleSearch, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./profile.jpg", alt: "User profile", className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[240px] bg-white h-screen p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Trending")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Subscriptions")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "History")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Watch Later")))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `Thumbnail for ${video.title}`, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-2 text-lg font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, video.channel))))))); }