From 97abf2c3679d09d8d7af34a5fa2406273c0ec5ea Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Sun, 26 Dec 2021 16:51:35 +0100 Subject: [PATCH] Header focus --- components/REPL/index.tsx | 6 +++--- pages/index.tsx | 13 ++++++++++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx index c4a92ff..a279bce 100644 --- a/components/REPL/index.tsx +++ b/components/REPL/index.tsx @@ -1,11 +1,11 @@ -import { useRef, useState } from "react"; +import { MutableRefObject, useRef, useState } from "react"; import REPLInput from "./REPLInput"; import REPLHistory from "./REPLHistory"; import styles from "../../styles/REPL/REPLComplete.module.css"; +import type { NextPage } from "next"; -const REPL = () => { +const REPL: NextPage<{inputRef: MutableRefObject}> = ({ inputRef }) => { const [history, manipulateHistory] = useState([]); - const inputRef = useRef(); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); const onClearHistory = () => manipulateHistory([]); diff --git a/pages/index.tsx b/pages/index.tsx index e766b5b..d1efc8b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,17 +2,24 @@ import type { NextPage } from "next"; import Head from "next/head"; import Link from "next/link"; import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react"; +import { useRef } from "react"; import REPL from "../components/REPL"; import styles from "../styles/Home.module.css"; const Home: NextPage = () => { + const inputRef = useRef(); + + const focusInput = () => { + console.log("Focus") + if (inputRef.current) inputRef.current.focus();}; + return (<> c0ntroller.de
- +   Source | Bug? @@ -31,9 +38,9 @@ const Home: NextPage = () => { | - +  
- +
); };