function MainComponent({ terminalText, commandList }) { const [currentTerminalText, setCurrentTerminalText] = useState(terminalText); const [commandHistory, setCommandHistory] = useState([]); const [inputValue, setInputValue] = useState(""); const inputRef = useRef(null); const handleCommandSubmit = (event)=>{ event.preventDefault(); if (inputValue.trim() === "") return; setCurrentTerminalText((prevTerminalText)=>[ ...prevTerminalText, `user: ${inputValue}` ]); setCommandHistory((prevCommandHistory)=>[ ...prevCommandHistory, inputValue ]); setInputValue(""); }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleInputKeyDown = (event)=>{ if (event.key === "ArrowUp") { event.preventDefault(); if (commandHistory.length > 0) { setInputValue(commandHistory[commandHistory.length - 1]); } } else if (event.key === "Enter") { event.preventDefault(); handleCommandSubmit(event); } }; const clearCommand = ()=>{ setCurrentTerminalText([ "Welcome to Termux", "Type a command..." ]); setCommandHistory([]); setInputValue(""); if (inputRef.current) { inputRef.current.focus(); } }; const getInputClasses = ()=>{ return `bg-[#000] text-[#FFFFFF] font-mono w-full p-1 border-b-2 border-[#FFFF00] focus:outline-none ${inputRef.current && inputRef.current.clientWidth > 100 ? "rounded-l-md" : ""}`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000] p-2 rounded-md w-full max-w-[800px] h-[300px] overflow-auto", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, currentTerminalText.map((content, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-[#9CDCFE] font-mono", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, content))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#000] p-2 rounded-md w-full max-w-[800px]", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Commands:"), /*#__PURE__*/ React.createElement("button", { className: "text-white font-semibold hover:underline", onClick: clearCommand, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Clear")), /*#__PURE__*/ React.createElement("div", { className: "h-[150px] overflow-auto text-[#FFFFFF]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleCommandSubmit, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, className: getInputClasses(), placeholder: "Type a command...", name: "commandInput", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })), commandList.map((content, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-white font-mono", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, content))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "p-10", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { terminalText: [ "Welcome to Termux", "Type a command...", "Execution result..." ], commandList: [ "ls", "cd", "mkdir", "rm" ], __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); }