function MainComponent({ inputValue1, handleInputChange1, handleSendMessage1, handleClearMessage1, inputValue2, handleInputChange2, handleSendMessage2, handleClearMessage2, isSecondBarVisible, toggleSecondBarVisibility }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4 mt-4 absolute inset-x-0 bottom-20", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] rounded-lg shadow-md flex w-full max-w-md border border-[#33ff89] p-1", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userTextBar1", value: inputValue1, onChange: handleInputChange1, className: "flex-1 bg-[#010101] text-[#d1d1d1] rounded-l-lg focus:outline-none p-3 font-mono", placeholder: "Type message...", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage1, className: "bg-[#33ff89] text-[#121212] p-2 rounded-r-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "🚀"), /*#__PURE__*/ React.createElement("button", { onClick: handleClearMessage1, className: "bg-[#ff3333] text-white p-2 rounded-r-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "🔄")), isSecondBarVisible && /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] rounded-lg shadow-md flex w-full max-w-md border border-[#33ff89] p-1", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userTextBar2", value: inputValue2, onChange: handleInputChange2, className: "flex-1 bg-[#010101] text-[#d1d1d1] rounded-l-lg focus:outline-none p-3 font-mono", placeholder: "Type message...", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage2, className: "bg-[#33ff89] text-[#121212] p-2 rounded-r-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "🚀"), /*#__PURE__*/ React.createElement("button", { onClick: handleClearMessage2, className: "bg-[#ff3333] text-white p-2 rounded-r-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "🔄")), /*#__PURE__*/ React.createElement("button", { onClick: toggleSecondBarVisibility, className: "bg-[#555] text-white p-2 rounded-md self-end mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, isSecondBarVisible ? 'Remove Extra Bar' : 'Add Extra Bar')); } function StoryComponent() { const [inputValue1, setInputValue1] = React.useState(""); const [inputValue2, setInputValue2] = React.useState(""); const [isSecondBarVisible, setIsSecondBarVisible] = React.useState(false); const handleInputChange1 = (e)=>setInputValue1(e.target.value); const handleInputChange2 = (e)=>setInputValue2(e.target.value); const handleSendMessage1 = ()=>{}; const handleSendMessage2 = ()=>{}; const handleClearMessage1 = ()=>setInputValue1(''); const handleClearMessage2 = ()=>setInputValue2(''); const toggleSecondBarVisibility = ()=>setIsSecondBarVisible(!isSecondBarVisible); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#202020] flex items-center justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { inputValue1: inputValue1, handleInputChange1: handleInputChange1, handleSendMessage1: handleSendMessage1, handleClearMessage1: handleClearMessage1, inputValue2: inputValue2, handleInputChange2: handleInputChange2, handleSendMessage2: handleSendMessage2, handleClearMessage2: handleClearMessage2, isSecondBarVisible: isSecondBarVisible, toggleSecondBarVisibility: toggleSecondBarVisibility, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this })); }