New username input + buttons (LandingPage)

web/src/App.scss

@@ -1,3 +1,3 @@
 @use "node_modules/@picocss/pico/scss/pico" with (
     $theme-color: "pumpkin"
-);
+);

web/src/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { io } from "socket.io-client";
+import LandingPage from './pages/landing/LandingPage';
 
 function App() {
   const socket = io("http://localhost:3010");
@@ -8,12 +9,7 @@ function App() {
 
   return (
     <div className="App">
-      <header className="App-header">
+      <LandingPage socket={socket}/>
-        <button onClick={emitData}>
-          Emit Data
-        </button>
-        Hello World! Front
-      </header>
     </div>
   );
 }

web/src/pages/landing/LandingPage.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { Socket } from "socket.io-client";
+
+const LandingPage = (props:{socket:Socket})=>{
+    var username = ""; 
+    const registerUsername = (event:any) => username = event.target.value;
+    const socket = props.socket;
+    const handleCreateLobby = () => socket.emit("create-lobby", {username:username});
+    return <React.Fragment>
+        <div className="LandingPageTitle">
+            <h1>Trains And Roads</h1>
+        </div>
+        <div className="UserNameImput">
+            <input placeholder="Enter username" onChange={registerUsername}></input>
+        </div>
+        <div className="CreateLobbyButton">
+            <button onClick={handleCreateLobby}>Create Lobby</button>
+        </div>
+        <div className="JoinLobby">
+            <input className="LobbyIdInput" placeholder="Enter Lobby Id"></input>
+            <button className="JoinLobbyButton secondary">Join Lobby</button>
+        </div>
+    </React.Fragment>
+};
+export default LandingPage;