function CommandInputDisplay({ title, placeholder, submitText, processCommand }) { const [command, setCommand] = React.useState(''); const [output, setOutput] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); const result = processCommand(command); setOutput(result); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: command, onChange: (e)=>setCommand(e.target.value), name: "command", placeholder: placeholder, className: "mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, submitText)), output && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 18 }, __self: this }, output)); } function CommandInputDisplayStory() { const processCommand = (command)=>{ if (command === "55") return "600"; return "Unrecognized command"; }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CommandInputDisplay, { title: "Command Handler", placeholder: "Enter command", submitText: "Submit", processCommand: processCommand, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); } function MainComponent() { const [command, setCommand] = React.useState(""); const [output, setOutput] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (command === "55") { setOutput("600"); } else { setOutput(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Command Handler"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: command, onChange: (e)=>setCommand(e.target.value), name: "command", placeholder: "Enter command", className: "mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Submit")), output && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 18 }, __self: this }, output)); }