function VideoPlayer({ title, description, videoUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full pt-[56.25%]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "absolute top-0 left-0 w-full h-full object-cover", controls: true, playsInline: true, src: videoUrl, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-6", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, description))); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { title: "Beautiful Sunset at the Beach", description: "Watch this stunning timelapse of a sunset captured at Malibu Beach, featuring golden hours and crashing waves.", videoUrl: "/sample-video.mp4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VideoPlayer, { title: "Mountain Climbing Adventure", description: "Follow along as we climb Mount Everest in this thrilling documentary-style video.", videoUrl: "/mountain-video.mp4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function SocialShare({ url = "", title = "" }) { const encodedUrl = encodeURIComponent(url); const encodedTitle = encodeURIComponent(title); const socialLinks = [ { name: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, icon: "fab fa-facebook" }, { name: "Twitter", href: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`, icon: "fab fa-twitter" }, { name: "LinkedIn", href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`, icon: "fab fa-linkedin" }, { name: "Pinterest", href: `https://pinterest.com/pin/create/button/?url=${encodedUrl}&description=${encodedTitle}`, icon: "fab fa-pinterest" }, { name: "Reddit", href: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`, icon: "fab fa-reddit" }, { name: "VK", href: `https://vk.com/share.php?url=${encodedUrl}&title=${encodedTitle}`, icon: "fab fa-vk" }, { name: "Email", href: `mailto:?subject=${encodedTitle}&body=${encodedUrl}`, icon: "fas fa-envelope" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, socialLinks.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.name, href: link.href, target: "_blank", rel: "noopener noreferrer", className: "text-gray-600 hover:text-gray-800 transition-colors", "aria-label": `Share on ${link.name}`, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${link.icon} text-2xl`, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })))); } function SocialShareStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Default Share Icons"), /*#__PURE__*/ React.createElement(SocialShare, { url: "https://example.com", title: "Check out this awesome page!", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }))); } function Header({ logoSrc = "/logo.png" }) { const [isOpen, setIsOpen] = useState(false); return /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 bg-white shadow-sm z-50", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "ml-10 flex items-baseline space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Services"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })))), isOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "px-2 pt-2 pb-3 space-y-1", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Services"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Contact"))))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-16", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Content goes here")))); } function Sidebar({ author = { name: "", image: "", bio: "" }, relatedContent = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8 p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[300px] bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: author.image || "/default-avatar.jpg", alt: `${author.name}'s profile picture`, className: "w-24 h-24 rounded-full mb-4 object-cover", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, author.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, author.bio)), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Related Content"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, relatedContent.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex gap-3", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.thumbnail || "/default-thumbnail.jpg", alt: `Thumbnail for ${item.title}`, className: "w-20 h-20 object-cover rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-crimson-text font-medium leading-tight mb-1", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, item.timestamp)))))))); } function SidebarStory() { const sampleAuthor = { name: "Jane Smith", image: "/author-image.jpg", bio: "Digital content creator and storyteller with 10 years of experience" }; const sampleContent = [ { title: "Understanding Modern Art", thumbnail: "/video-thumb-1.jpg", timestamp: "10:24" }, { title: "The Future of Design", thumbnail: "/video-thumb-2.jpg", timestamp: "15:30" }, { title: "Creative Process Explained", thumbnail: "/video-thumb-3.jpg", timestamp: "08:45" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { author: sampleAuthor, relatedContent: sampleContent, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this })); } function MainComponent() { const author = { name: "Sarah Parker", image: "/creator-avatar.jpg", bio: "Tech enthusiast and video creator exploring the latest in technology" }; const relatedVideos = [ { title: "The Future of AI", thumbnail: "/tech-thumb-1.jpg", timestamp: "12:45" }, { title: "Web Development in 2024", thumbnail: "/tech-thumb-2.jpg", timestamp: "15:20" }, { title: "Machine Learning Basics", thumbnail: "/tech-thumb-3.jpg", timestamp: "08:30" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-2 bg-gradient-to-r from-[#ff0018] via-[#ffa52c] via-[#ffff41] via-[#008018] via-[#0000f9] to-[#86007d]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Header, { logoSrc: "/tech-logo.png", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 pt-20", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row gap-8", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { title: "Understanding Modern Technology", description: "Explore the latest trends and innovations shaping our digital world", videoUrl: "/tech-video.mp4", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SocialShare, { url: "https://example.com/tech-video", title: "Understanding Modern Technology", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "lg:w-[350px]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { author: author, relatedContent: relatedVideos, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }))))); }