function MainComponent({ videoTitle, videoDescription, videoUrl, relatedVideos }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-[315px] md:h-[450px]", src: videoUrl, title: videoTitle, allowFullScreen: true, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, videoTitle), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#555]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, videoDescription))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Related Videos"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, relatedVideos.map((video, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: video.url, className: "flex items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `Thumbnail for ${video.title}`, className: "w-[120px] h-[90px] mr-4", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, video.title))))))); } function StoryComponent() { const video = { videoTitle: "Example Video", videoDescription: "This is an example video description.", videoUrl: "https://www.youtube.com/embed/example", relatedVideos: [ { url: "#", title: "Related Video 1", thumbnail: "/path/to/thumbnail1.jpg" }, { url: "#", title: "Related Video 2", thumbnail: "/path/to/thumbnail2.jpg" }, { url: "#", title: "Related Video 3", thumbnail: "/path/to/thumbnail3.jpg" } ] }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { videoTitle: video.videoTitle, videoDescription: video.videoDescription, videoUrl: video.videoUrl, relatedVideos: video.relatedVideos, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); }