Add style to Join.js

co-authored-by: mitchemmmc <mitchemmc@gmail.com>

src/routes/Join.js

@@ -1,11 +1,27 @@
-import React from "react";
-import { A } from "hookrouter";
+import React, { useState } from "react";
+import { navigate } from "hookrouter";
+import { Container, Box, Label, Input, Button } from "theme-ui";
 
 function Join() {
+  const [id, setId] = useState("");
+
+  function handleChange(event) {
+    setId(event.target.value);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    navigate("/game");
+  }
+
   return (
-    <div>
-      <A href="/game">GO TO GAME</A>JOIN!
-    </div>
+    <Container p={4} sx={{ maxWidth: "300px" }}>
+      <Box as="form" onSubmit={handleSubmit}>
+        <Label htmlFor="id">Shove an ID in me</Label>
+        <Input my={4} id="id" name="id" value={id} onChange={handleChange} />
+        <Button>Go ʕ•ᴥ•ʔ</Button>
+      </Box>
+    </Container>
   );
 }