feat: implement navigation to public room from home

src/pages/Home/Home.tsx

@@ -1,16 +1,25 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
 import { v4 as uuid } from 'uuid'
 
 export function Home() {
   const [roomName, setRoomName] = useState(uuid())
+  const navigate = useNavigate()
 
   const handleRoomNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target
     setRoomName(value)
   }
 
+  const handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    navigate(`/public/${roomName}`)
+  }
+
   return (
     <div className="Home">
       <header className="max-w-3xl text-center mx-auto">
@@ -25,13 +34,22 @@ export function Home() {
         </Typography>
       </header>
       <main className="mt-8 max-w-3xl text-center mx-auto">
-        <TextField
-          id="outlined-basic"
-          label="Room name"
-          variant="outlined"
-          value={roomName}
-          onChange={handleRoomNameChange}
-        />
+        <form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">
+          <FormControl fullWidth>
+            <TextField
+              label="Room name"
+              variant="outlined"
+              value={roomName}
+              onChange={handleRoomNameChange}
+              size="medium"
+            />
+          </FormControl>
+          <div className="block pt-4">
+            <Button variant="contained" type="submit">
+              Go to public room
+            </Button>
+          </div>
+        </form>
       </main>
     </div>
   )