function ModernDarkHeader({ logoSrc, menuItems, onSearch, onLogin }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-gray-900 text-white py-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.url, className: "text-lg font-poppins font-medium text-white hover:text-blue-400 transition duration-300", __source: { fileName: "", lineNumber: 9, columnNumber: 17 }, __self: this }, item.label))))), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 order-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/e6793aef-f053-48bf-b43b-aee790684f67/", className: "h-8", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 order-3", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", className: "bg-gray-800 text-white rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500", onChange: onSearch, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute right-0 top-0 bottom-0 px-4 text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-poppins font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 flex items-center space-x-2", onClick: onLogin, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Login"))))); } function ModernDarkHeaderStory() { const menuItems = [ { label: 'Home', url: '/' }, { label: 'Products', url: '/products' }, { label: 'About Us', url: '/about' }, { label: 'Contact', url: '/contact' } ]; const handleSearch = (event)=>{ console.log('Search query:', event.target.value); }; const handleLogin = ()=>{ console.log('Login button clicked'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ModernDarkHeader, { logoSrc: "/path/to/logo.png", menuItems: menuItems, onSearch: handleSearch, onLogin: handleLogin, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this })); } function ModernMovieShowcaseSlider({ movies, currentIndex, onPrevClick, onNextClick }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px] bg-black overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, movies.map((movie, index)=>/*#__PURE__*/ React.createElement("div", { key: movie.id, className: `absolute top-0 left-0 w-full h-full transition-opacity duration-500 ${index === currentIndex ? 'opacity-100' : 'opacity-0'}`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: movie.image, alt: `${movie.title} movie poster`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-1/2 h-full p-12 flex flex-col justify-center bg-gradient-to-r from-black to-transparent text-white", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-5xl font-bold mb-2 font-montserrat", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, movie.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mr-4 font-roboto text-[#888]", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, movie.releaseYear), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#888]", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, movie.hasSubtitles ? 'Subtitles Available' : 'Dubbed')), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-yellow-400 text-2xl mr-2", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, movie.rating)), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-8 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, movie.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-600 text-white px-6 py-3 rounded-full text-2xl flex items-center mr-4", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }), "Watch Now"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white p-3 rounded-full", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-2xl", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { className: "absolute top-1/2 left-4 transform -translate-y-1/2 bg-[#121212] bg-opacity-50 text-white p-4 rounded-full transition-colors duration-300 hover:bg-opacity-75", onClick: onPrevClick, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-3xl", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute top-1/2 right-4 transform -translate-y-1/2 bg-[#121212] bg-opacity-50 text-white p-4 rounded-full transition-colors duration-300 hover:bg-opacity-75", onClick: onNextClick, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-3xl", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }))); } function ModernMovieShowcaseSliderStory() { const movies = [ { id: 1, title: 'Movie 1', description: 'This is the description for Movie 1', image: './movie1.jpg', rating: '8.5', releaseYear: 2021, hasSubtitles: true }, { id: 2, title: 'Movie 2', description: 'This is the description for Movie 2', image: './movie2.jpg', rating: '7.2', releaseYear: 2022, hasSubtitles: false }, { id: 3, title: 'Movie 3', description: 'This is the description for Movie 3', image: './movie3.jpg', rating: '9.1', releaseYear: 2023, hasSubtitles: true } ]; const [currentIndex, setCurrentIndex] = React.useState(0); const handlePrevClick = ()=>{ setCurrentIndex((prevIndex)=>prevIndex === 0 ? movies.length - 1 : prevIndex - 1); }; const handleNextClick = ()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % movies.length); }; React.useEffect(()=>{ const intervalId = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % movies.length); }, 5000); return ()=>{ clearInterval(intervalId); }; }, [ movies.length ]); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ModernMovieShowcaseSlider, { movies: movies, currentIndex: currentIndex, onPrevClick: handlePrevClick, onNextClick: handleNextClick, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this })); } function MainComponent() { const menuItems = [ { label: 'Home', url: '/' }, { label: 'Movies', url: '/movies' }, { label: 'TV Shows', url: '/tv-shows' }, { label: 'My List', url: '/my-list' } ]; const handleSearch = (event)=>{ console.log('Search query:', event.target.value); }; const handleLogin = ()=>{ console.log('Login button clicked'); }; const movies = [ { id: 1, title: 'Inception', description: 'A skilled thief is tasked with planting an idea into someone\'s subconscious.', image: './inception.jpg', rating: '8.8', releaseYear: 2010, hasSubtitles: true }, { id: 2, title: 'The Dark Knight', description: 'Batman faces his greatest challenge as the Joker wreaks havoc on Gotham City.', image: './dark-knight.jpg', rating: '9.0', releaseYear: 2008, hasSubtitles: true }, { id: 3, title: 'Interstellar', description: 'A team of explorers travel through a wormhole in search of a new home for humanity.', image: './interstellar.jpg', rating: '8.6', releaseYear: 2014, hasSubtitles: false } ]; const [currentIndex, setCurrentIndex] = React.useState(0); const handlePrevClick = ()=>{ setCurrentIndex((prevIndex)=>prevIndex === 0 ? movies.length - 1 : prevIndex - 1); }; const handleNextClick = ()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % movies.length); }; React.useEffect(()=>{ const intervalId = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % movies.length); }, 5000); return ()=>{ clearInterval(intervalId); }; }, [ movies.length ]); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ModernDarkHeader, { logoSrc: "https://ucarecdn.com/e6793aef-f053-48bf-b43b-aee790684f67/", menuItems: menuItems, onSearch: handleSearch, onLogin: handleLogin, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ModernMovieShowcaseSlider, { movies: movies, currentIndex: currentIndex, onPrevClick: handlePrevClick, onNextClick: handleNextClick, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); }