function MeetingControls({ onMicClick, onVideoClick, onShareClick, onParticipantsClick, onChatClick, onEndClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 bg-[#1a1a1a] p-4 w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onMicClick, className: "bg-white hover:bg-gray-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-[#1a1a1a] text-xl", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onVideoClick, className: "bg-white hover:bg-gray-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-[#1a1a1a] text-xl", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onShareClick, className: "bg-white hover:bg-gray-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-desktop text-[#1a1a1a] text-xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onParticipantsClick, className: "bg-white hover:bg-gray-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-[#1a1a1a] text-xl", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onChatClick, className: "bg-white hover:bg-gray-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-alt text-[#1a1a1a] text-xl", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onEndClick, className: "bg-red-600 hover:bg-red-700 p-3 rounded-full", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-slash text-white text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }))); } function MeetingControlsStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MeetingControls, { onMicClick: ()=>{}, onVideoClick: ()=>{}, onShareClick: ()=>{}, onParticipantsClick: ()=>{}, onChatClick: ()=>{}, onEndClick: ()=>{}, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); } function ParticipantsSidebar({ participants = [], onSearch = ()=>{}, activeTab = "participants", onTabChange = ()=>{}, messages = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-white border-l border-gray-200 h-screen flex flex-col", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", onChange: (e)=>onSearch(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex border-b border-gray-200", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onTabChange("participants"), className: `flex-1 py-3 text-center font-medium ${activeTab === "participants" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onTabChange("chat"), className: `flex-1 py-3 text-center font-medium ${activeTab === "chat" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, activeTab === "participants" && /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, participants.map((participant)=>/*#__PURE__*/ React.createElement("div", { key: participant.id, className: "flex items-center p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: participant.avatar, alt: `${participant.name}'s avatar`, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, participant.name))))), activeTab === "chat" && /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "flex items-start", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.avatar, alt: `${message.sender}'s avatar`, className: "w-8 h-8 rounded-full object-cover", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-sm text-gray-900", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, message.sender), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, message.text))))))); } function ParticipantsSidebarStory() { const sampleParticipants = [ { id: 1, name: "John Doe", avatar: "/avatar1.jpg" }, { id: 2, name: "Jane Smith", avatar: "/avatar2.jpg" }, { id: 3, name: "Mike Johnson", avatar: "/avatar3.jpg" } ]; const sampleMessages = [ { id: 1, sender: "John Doe", avatar: "/avatar1.jpg", text: "Hello everyone!" }, { id: 2, sender: "Jane Smith", avatar: "/avatar2.jpg", text: "Hi John, how are you?" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ParticipantsSidebar, { participants: sampleParticipants, messages: sampleMessages, activeTab: "participants", onSearch: (query)=>console.log("Searching:", query), onTabChange: (tab)=>console.log("Switching to tab:", tab), __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showSidebar, setShowSidebar] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const navigate = React.useCallback(()=>{ window.location.href = "/new-page"; }, []); const [participants] = useState([ { id: 1, name: "Sarah Johnson", avatar: "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=128&h=128&fit=crop" }, { id: 2, name: "Emily Chen", avatar: "https://images.unsplash.com/photo-1589156280159-27698a70f29e?w=128&h=128&fit=crop" }, { id: 3, name: "Maria Rodriguez", avatar: "https://images.unsplash.com/photo-1523825036634-aab3cce05919?w=128&h=128&fit=crop" }, { id: 4, name: "Priya Patel", avatar: "https://images.unsplash.com/photo-1544725121-be3bf52e2dc8?w=128&h=128&fit=crop" }, { id: 5, name: "Jessica Williams", avatar: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=128&h=128&fit=crop" }, { id: 6, name: "Aisha Rahman", avatar: "https://ucarecdn.com/f881e697-2628-4f87-96e3-52a4cd006484/-/format/auto/" }, { id: 7, name: "Sophie Martin", avatar: "https://images.unsplash.com/photo-1589156191108-c762ff4b96ab?w=128&h=128&fit=crop" }, { id: 8, name: "Luna Kim", avatar: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=128&h=128&fit=crop" } ]); const [messages] = useState([ { id: 1, sender: "Sarah Johnson", avatar: "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=128&h=128&fit=crop", text: "Hello everyone!" }, { id: 2, sender: "Emily Chen", avatar: "https://images.unsplash.com/photo-1589156280159-27698a70f29e?w=128&h=128&fit=crop", text: "Hi team!" }, { id: 3, sender: "Priya Patel", avatar: "https://images.unsplash.com/photo-1544725121-be3bf52e2dc8?w=128&h=128&fit=crop", text: "Good morning! Ready for the meeting?" }, { id: 4, sender: "Jessica Williams", avatar: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=128&h=128&fit=crop", text: "Just joining now" }, { id: 5, sender: "Sophie Martin", avatar: "https://images.unsplash.com/photo-1589156191108-c762ff4b96ab?w=128&h=128&fit=crop", text: "Can everyone hear me okay?" } ]); const toggleSidebar = ()=>setShowSidebar(!showSidebar); const handleLogin = (e)=>{ e.preventDefault(); if (password === "rants2025") { setIsAuthenticated(true); setError(""); } else { setError("Incorrect password"); } }; if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-[#1a1a1a] rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-inter text-white text-center mb-8", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "goDDess Rants Podcast Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-6", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "text-gray-300 block mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full px-4 py-2 bg-[#2a2a2a] border border-gray-600 rounded-lg text-white focus:outline-none focus:border-purple-500", placeholder: "Enter password", required: true, __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this })), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 132, columnNumber: 23 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-purple-500 text-white py-2 px-4 rounded-lg hover:bg-purple-600 transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Enter Meeting"))), /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "https://ucarecdn.com/2a6758c8-8e96-478d-9449-b6ce30c5228c/-/format/auto/", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#121212] text-white overflow-hidden", __source: { fileName: "", lineNumber: 150, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-inter text-gray-300", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "Meeting ID: 332-246-3589")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 m-4", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#1a1a1a] rounded-lg flex items-center justify-center relative", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-inter text-gray-400", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, "goDDess Rants Podcast")), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 w-[160px] h-[160px] md:w-[200px] md:h-[200px]", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#2a2a2a] rounded-full overflow-hidden flex items-center justify-center border-2 border-gray-600", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/06c0b66b-8a43-4492-babe-f2e227b7370f/-/format/auto/", alt: "Your webcam", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(MeetingControls, { onMicClick: ()=>{}, onVideoClick: ()=>navigate(), onShareClick: ()=>{}, onParticipantsClick: toggleSidebar, onChatClick: toggleSidebar, onEndClick: ()=>{}, __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `fixed md:relative right-0 top-0 h-full transition-transform duration-300 transform ${showSidebar ? "translate-x-0" : "translate-x-full md:translate-x-0"}`, __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ParticipantsSidebar, { participants: participants, messages: messages, onSearch: ()=>{}, onTabChange: ()=>{}, __source: { fileName: "", lineNumber: 194, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "https://ucarecdn.com/2a6758c8-8e96-478d-9449-b6ce30c5228c/-/format/auto/", __source: { fileName: "", lineNumber: 201, columnNumber: 7 }, __self: this })); }