function MainComponent() { const [participants, setParticipants] = React.useState([ { role: 'owner', name: 'オーナー' }, { role: 'participant', name: '回答者1' }, { role: 'participant', name: '回答者2' }, { role: 'participant', name: '回答者3' }, { role: 'participant', name: '回答者4' }, { role: 'participant', name: '回答者5' }, { role: 'participant', name: '回答者6' } ]); const [input, setInput] = React.useState(''); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const addQuestionOrAnswer = async ()=>{ setLoading(true); setMessages((prevMessages)=>[ ...prevMessages, { role: 'participant', content: input } ]); setInput(''); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between h-[100vh] bg-gray-100", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-white", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text mb-4 text-lg", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "クイズゲーム"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, participants.map((participant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `font-roboto ${participant.role === 'owner' ? 'font-bold' : ''}`, __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, participant.name), participant.role === 'owner' && /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-blue-500", __source: { fileName: "", lineNumber: 30, columnNumber: 48 }, __self: this }, "(オーナー)"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-white p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-2xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "質問をしてください"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chat-input", className: "flex-grow border rounded-l-lg p-2 font-roboto", value: input, onChange: (e)=>setInput(e.target.value), disabled: loading, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded-r-lg font-roboto", onClick: addQuestionOrAnswer, disabled: loading, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, loading ? 'Loading...' : '送信')), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[400px] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 rounded-lg mb-4 max-w-[75%] ${msg.role === 'participant' ? 'bg-blue-500 text-white self-end mr-0 ml-auto' : 'bg-gray-200 text-black self-start'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, msg.content)))))), /*#__PURE__*/ React.createElement("div", { className: "flex w-full justify-between bg-gray-100 p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, participants.slice(1, 4).map((participant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 mb-2 w-[150px] h-[100px] flex items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, participant.name))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, participants.slice(4, 7).map((participant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 mb-2 w-[150px] h-[100px] flex items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, participant.name))))); }