function VideoThumbnailDisplay({ src, title }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: `Thumbnail for ${title}`, className: "w-24 h-16 object-cover rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function VideoThumbnailDisplayStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoThumbnailDisplay, { src: "/path/to/video-thumbnail.jpg", title: "Example Video", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VideoThumbnailDisplay, { src: "/path/to/another-thumbnail.jpg", title: "Another Video", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [videos, setVideos] = React.useState([ { id: 1, title: 'Nature Documentary', thumbnail: '/nature-thumbnail.jpg', url: '/nature-video.mp4' }, { id: 2, title: 'Cooking Tutorial', thumbnail: '/cooking-thumbnail.jpg', url: '/cooking-video.mp4' }, { id: 3, title: 'Tech Review', thumbnail: '/tech-thumbnail.jpg', url: '/tech-video.mp4' } ]); const [currentVideo, setCurrentVideo] = React.useState(null); const handleVideoSelect = (video)=>{ setCurrentVideo(video); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-blue-600 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Video Streaming Service")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col md:flex-row gap-8", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "md:w-2/3", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, currentVideo ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full rounded-lg shadow-lg", controls: true, src: currentVideo.url, __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mt-4 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, currentVideo.title)) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-64 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Select a video to start watching"))), /*#__PURE__*/ React.createElement("aside", { className: "md:w-1/3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Video List"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("li", { key: video.id, className: "cursor-pointer", onClick: ()=>handleVideoSelect(video), __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 bg-white p-4 rounded-lg shadow hover:shadow-md transition duration-300", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `Thumbnail for ${video.title}`, className: "w-24 h-16 object-cover rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, video.title)))))))); }