function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const handleSendMessage = (e)=>{ e.preventDefault(); if (inputMessage.trim()) { const newMessage = { text: inputMessage, sender: 'user', timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages([ ...messages, newMessage ]); setInputMessage(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "チャットタイムライン")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl ${message.sender === 'user' ? 'bg-blue-500 text-white rounded-tl-lg rounded-tr-lg rounded-bl-lg' : 'bg-white text-gray-800 rounded-tl-lg rounded-tr-lg rounded-br-lg'} p-3 shadow-md`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs mt-1 text-gray-300", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, message.timestamp))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "p-4 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), className: "flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }))))); }