function MainComponent() { const videos = [ { title: "Amazing Nature", thumbnail: "./nature.jpg", videoUrl: "./nature.mp4" }, { title: "City Life", thumbnail: "./city.jpg", videoUrl: "./city.mp4" }, { title: "Technology Advances", thumbnail: "./technology.jpg", videoUrl: "./technology.mp4" } ]; return /*#__PURE__*/ React.createElement("div", { className: "h-screen overflow-auto bg-[#F9F9F9]", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-screen-xl mx-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#FF0000] flex items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-youtube-play text-white text-4xl", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white font-bold text-2xl", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "YouTube")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, videos.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { src: video.videoUrl, className: "w-full h-auto", preload: "none", muted: true, loop: true, onMouseEnter: (event)=>event.currentTarget.play(), onMouseLeave: (event)=>event.currentTarget.pause(), __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: video.videoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `${video.title} thumbnail`, className: "absolute top-0 left-0 w-full h-full object-cover opacity-100 group-hover:opacity-0 transition-opacity duration-500 ease-in-out", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 p-2 bg-gradient-to-t from-black to-transparent w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white truncate", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, video.title))))))); }