First REPL mock

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "semi": ["warn", "always"],
+    "quotes": ["warn", "double"]
+  }
 }

components/REPLInput.tsx

@@ -0,0 +1,35 @@
+import type { NextPage } from "next";
+import React from "react"
+import { commandCompletion } from "../lib/commands"
+import styles from "../styles/REPLInput.module.css"
+
+const REPLInput: NextPage = () => {
+    const typed = React.createRef<HTMLSpanElement>();
+    const completion = React.createRef<HTMLSpanElement>();
+    const [currentCmd, setCurrentCmd] = React.useState("");
+
+    const replinOnChange = (e: React.FormEvent<HTMLInputElement>) => {
+        const currentInput = (e.target as HTMLInputElement).value;
+        const suggest = commandCompletion(currentInput);
+        setCurrentCmd(suggest);
+        if (typed.current) typed.current.innerHTML = currentInput;
+        if (completion.current) completion.current.innerHTML = suggest.substring(currentInput.length);
+    }
+
+    const tabComplete = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Tab" && currentCmd !== "") {
+            e.preventDefault();
+            (e.target as HTMLInputElement).value = currentCmd;
+            if(typed.current) typed.current.innerHTML = currentCmd;
+            if(completion.current) completion.current.innerHTML = "";
+        }
+        return false;
+    }
+
+    return <div className={styles.wrapper}>
+        <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} />
+        <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+    </div>
+}
+
+export default REPLInput;

lib/commands.ts

@@ -0,0 +1,7 @@
+const commandList = ["about", "navigate", "external", "help", "ed", "nano"]
+
+export function commandCompletion(input: string): string {
+    if (input === "") return "";
+    const candidates = commandList.map((cmd) => [cmd.substring(0, input.length), cmd]).filter((cmd) => cmd[0] === input);
+    return candidates.length > 0 ? candidates[0][1] : "";
+}

pages/index.tsx

@@ -1,8 +1,9 @@
 import type { NextPage } from 'next'
+import REPLInput from '../components/REPLInput'
 
 const Home: NextPage = () => {
   return (
-    <>Hallu</>
+    <REPLInput />
   )
 }
 

styles/REPLInput.module.css

@@ -0,0 +1,37 @@
+.wrapper > input, .wrapper > span {
+    font-size: 1.25rem;
+    font-family: "CascadiaCode";
+    padding: .125rem .25rem;
+    width: calc(100% - 1rem);
+}
+
+.wrapper {
+    position: relative;
+}
+
+.in, .in:focus {
+    border: 0;
+    outline-width: 0;
+}
+
+.completionWrapper {
+    position: absolute;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    width: min-content;
+}
+
+.completionWrapper span {
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+}
+
+.typed {
+    opacity: 0;
+}
+
+.completion {
+    color: #ccc
+}