function SendButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3b3b3b] p-2 rounded text-white font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Send"); } function SendButtonStory() { const handleClick = ()=>alert('Button clicked!'); return /*#__PURE__*/ React.createElement("div", { className: "m-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SendButton, { onClick: handleClick, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function SendButton2({ type = "button", label = "Send", onClick }) { return /*#__PURE__*/ React.createElement("button", { type: type, className: "bg-[#3b3b3b] p-2 rounded font-roboto text-white", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function SendButton2Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SendButton2, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SendButton2, { label: "Submit", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SendButton2, { onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function SendButtonForGameChat({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3b3b3b] p-2 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function SendButtonForGameChatStory() { const handleSubmit = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SendButtonForGameChat, { onClick: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement(SendButtonForGameChat, { onClick: handleSubmit, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Send Message")); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] p-4 text-white font-roboto text-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Game Website"), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Game Area"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(SendButton2, { label: "Start Game", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] bg-[#2a2a2a] p-4 flex flex-col", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-white", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Online Chat"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mt-4 overflow-y-auto bg-[#1a1a1a] p-2 rounded", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#e0e0e0] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "Player1:"), " Hello!"), /*#__PURE__*/ React.createElement("div", { className: "text-[#e0e0e0] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Player2:"), " Hi!")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-grow p-2 rounded-l bg-[#3b3b3b] text-white font-roboto", placeholder: "Type your message...", name: "chatInput", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SendButtonForGameChat, { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] p-4 text-white font-roboto text-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SendButton, { onClick: ()=>alert('Sending feedback...'), __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Send Feedback"))); }