c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Header focus

Browse Source
This commit is contained in:
Daniel Kluge 2021-12-26 16:51:35 +01:00
parent a80d747881
commit 97abf2c367
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/REPL/index.tsx
View File

@ -1,11 +1,11 @@
import { useRef, useState } from "react"; import { MutableRefObject, useRef, useState } from "react";
import REPLInput from "./REPLInput"; import REPLInput from "./REPLInput";
import REPLHistory from "./REPLHistory"; import REPLHistory from "./REPLHistory";
import styles from "../../styles/REPL/REPLComplete.module.css"; import styles from "../../styles/REPL/REPLComplete.module.css";
import type { NextPage } from "next";
const REPL = () => { const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> = ({ inputRef }) => {
const [history, manipulateHistory] = useState<string[]>([]); const [history, manipulateHistory] = useState<string[]>([]);
const inputRef = useRef<HTMLInputElement>();
const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
const onClearHistory = () => manipulateHistory([]); const onClearHistory = () => manipulateHistory([]);

13
pages/index.tsx
View File

@ -2,17 +2,24 @@ import type { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react"; import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
import { useRef } from "react";
import REPL from "../components/REPL"; import REPL from "../components/REPL";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
const Home: NextPage = () => { const Home: NextPage = () => {
const inputRef = useRef<HTMLInputElement>();
const focusInput = () => {
console.log("Focus")
if (inputRef.current) inputRef.current.focus();};
return (<> return (<>
<Head> <Head>
<title>c0ntroller.de</title> <title>c0ntroller.de</title>
</Head> </Head>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.header}> <div className={styles.header}>
<span className={styles.spacer} /> <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
<Link href="https://git.c0ntroller.de/c0ntroller/frontpage"><a>Source</a></Link> <Link href="https://git.c0ntroller.de/c0ntroller/frontpage"><a>Source</a></Link>
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<Link href="https://git.c0ntroller.de/c0ntroller/frontpage/issues/new"><a>Bug?</a></Link> <Link href="https://git.c0ntroller.de/c0ntroller/frontpage/issues/new"><a>Bug?</a></Link>
@ -31,9 +38,9 @@ const Home: NextPage = () => {
</Link> </Link>
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link> <Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link>
<span className={styles.spacer} /> <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</div> </div>
<REPL /> <REPL inputRef={inputRef} />
</div> </div>
</>); </>);
}; };