function MainComponent({ messages, sendMessage, userNickname }) { const handleSubmit = (event)=>{ event.preventDefault(); const message = event.target.message.value.trim(); if (message) { sendMessage({ author: userNickname, text: message }); event.target.reset(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] text-white font-roboto flex-none", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Chat с Skalaratv")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.author === "Skalaratv" ? "justify-start" : "justify-end"}`, __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-2 ${msg.author === "Skalaratv" ? "bg-blue-400 text-white" : "bg-gray-200 text-gray-700"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, msg.text))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 flex-none", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", placeholder: "Напишите сообщение...", className: "flex-1 p-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Отправить")))); } function StoryComponent() { const mockMessages = [ { author: "Skalaratv", text: "Привет! Как твои дела?" }, { author: "User", text: "Все неплохо, спасибо!" }, { author: "User", text: "Что делаешь?" }, { author: "Skalaratv", text: "Отвечаю на ваши сообщения." } ]; const sendMessage = (message)=>{ console.log("Sending message:", message); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { messages: mockMessages, sendMessage: sendMessage, userNickname: "User", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); }