From e52f3cbdafe54fd64ffa0444fd9f1d85bcd8d8aa Mon Sep 17 00:00:00 2001
From: nicola <nthouliss@gmail.com>
Date: Mon, 16 Mar 2020 22:15:30 +1100
Subject: [PATCH] Add style to Join.js

co-authored-by: mitchemmmc <mitchemmc@gmail.com>
---
 src/routes/Join.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/routes/Join.js b/src/routes/Join.js
index 343cc38..7fc3d89 100644
--- a/src/routes/Join.js
+++ b/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>
   );
 }