You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.7 KiB
68 lines
1.7 KiB
import Head from 'next/head';
|
|
import React from 'react';
|
|
import config from '../../config.json';
|
|
import { Input } from '../components/input';
|
|
import { useHistory } from '../components/history/hook';
|
|
import { History } from '../components/history/History';
|
|
import { banner } from '../utils/bin/commands';
|
|
|
|
interface IndexPageProps {
|
|
inputRef: React.RefObject<HTMLInputElement>;
|
|
}
|
|
|
|
const IndexPage: React.FC<IndexPageProps> = ({ inputRef }) => {
|
|
const containerRef = React.useRef(null);
|
|
const {
|
|
history,
|
|
command,
|
|
lastCommandIndex,
|
|
setCommand,
|
|
setHistory,
|
|
updateHistory,
|
|
clearHistory,
|
|
setLastCommandIndex,
|
|
} = useHistory([]);
|
|
|
|
const init = React.useCallback(() => setHistory(banner()), []);
|
|
|
|
React.useEffect(() => {
|
|
init();
|
|
}, [init]);
|
|
|
|
React.useEffect(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.scrollIntoView();
|
|
inputRef.current.focus({ preventScroll: true });
|
|
}
|
|
}, [history]);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{config.title}</title>
|
|
</Head>
|
|
|
|
<div className="p-8 overflow-hidden h-full border-2 rounded border-light-yellow dark:border-dark-yellow">
|
|
<div ref={containerRef} className="overflow-y-auto h-full">
|
|
<History history={history} />
|
|
|
|
<Input
|
|
inputRef={inputRef}
|
|
containerRef={containerRef}
|
|
command={command}
|
|
history={history}
|
|
lastCommandIndex={lastCommandIndex}
|
|
setCommand={setCommand}
|
|
setHistory={setHistory}
|
|
updateHistory={updateHistory}
|
|
setLastCommandIndex={setLastCommandIndex}
|
|
clearHistory={clearHistory}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default IndexPage;
|