Add Player button

src/App.tsx

@@ -8,7 +8,7 @@ import {ApiUriContext, getData} from "./api/fetchApi.tsx";
 import {GetGames, GetPlayers} from "./api/endpoints/Data.tsx";
 import {
   AccordionGroup,
-  Box, CircularProgress,
+  Box, Button, CircularProgress,
   Divider,
   Input,
   Stack,
@@ -19,6 +19,7 @@ import PlayerAccordionItem from "./components/PlayerAccordionItem.tsx";
 import PlayerGameStatsDrawer from "./components/PlayerGameStatsDrawer.tsx";
 import {Cancel, CheckCircleOutline} from '@mui/icons-material';
 import {PlayerStatsDrawer} from "./components/PlayerStatsDrawer.tsx";
+import {AddPlayer} from "./api/endpoints/Actions.tsx";
 
 export default function App() {
   const [apiUri, setApiUri] = useState<string>("http://127.0.0.1:5239");
@@ -71,7 +72,6 @@ export default function App() {
         });
   }
 
-
   const [connectionTimer, setConnectionTimer] = useState<number | null>(null);
 
   useEffect(() => {
@@ -81,10 +81,16 @@ export default function App() {
         .then(() => setConnectionTimer(setInterval(checkConnection, 5000)));
   }, [apiUri]);
 
+  const [addPlayerStr, setAddPlayerStr] = useState("");
+  const addPlayer = () => {
+    const steamId = BigInt(addPlayerStr);
+    AddPlayer(apiUri, steamId);
+  }
   return (
       <ApiUriContext value={apiUri}>
         <PlayersContext.Provider value={{players: players}}>
           <GamesContext value={{games: games}}>
+            <Stack direction="row" spacing={2} position={"fixed"} top={5}>
               <Input type={"text"}
                      placeholder={"Api Uri"}
                      value={apiUri}
@@ -95,7 +101,13 @@ export default function App() {
                              ? <CheckCircleOutline color={"success"} />
                              : <Cancel color={"error"} />}
               />
-            <Stack direction={"row"} spacing={2}>
+              <Input type={"text"}
+                     placeholder={"Add SteamId"}
+                     onChange={(e) => setAddPlayerStr(e.target.value)}
+                     endDecorator={<Button onClick={addPlayer}>Add</Button>}
+              />
+            </Stack>
+            <Stack direction={"row"} spacing={2} overflow={"scroll"} position={"fixed"} top={50} width={"100%"} height={"calc(100% - 50px)"}>
               <Box sx={{width:'50%'}}>
                 <Typography level={"h2"}>Players</Typography>
                 <AccordionGroup>