function MainComponent({ status, message, participants, webContent }) { const [webScrapedContent, setWebScrapedContent] = React.useState(''); React.useEffect(()=>{ if (webContent) { fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: webContent.url }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.text()).then((data)=>{ setWebScrapedContent(data); }).catch((error)=>console.log(error)); } }, [ webContent ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto my-4 p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Skype-like Voice Chat with Socket.io"), /*#__PURE__*/ React.createElement("div", { className: `p-4 ${status === 'success' ? 'bg-green-200' : 'bg-red-200'} rounded-lg`, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, message), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212] mt-2", __source: { fileName: "", lineNumber: 29, columnNumber: 21 }, __self: this }, "Participants:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, participants && participants.map((participant, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 29 }, __self: this }, participant)))), webScrapedContent && /*#__PURE__*/ React.createElement("div", { className: "mt-2", dangerouslySetInnerHTML: { __html: webScrapedContent }, __source: { fileName: "", lineNumber: 36, columnNumber: 39 }, __self: this }))); } function StoryComponent() { const webContentExample = { url: 'https://example.com' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center justify-center min-h-screen bg-[#f0f0f2] p-8 gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { status: "success", message: "You are now connected to the voice chat room with multiple people.", participants: [ 'User 1', 'User 2', 'User 3' ], __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { status: "error", message: "Failed to connect to the voice chat room.", participants: [ 'User 4', 'User 5' ], __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { status: "loading", message: "Attempting to connect...", participants: [ 'User 6' ], webContent: webContentExample, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })); }