feat: add a Team Panel

src/TeamPanel.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { loadPlayers, User } from "./api";
+import { useSession } from "./Session";
+
+export const TeamPanel = () => {
+  const { teams } = useSession();
+  const [players, setPlayers] = useState<User[] | null>(null);
+  const [newPlayer, setNewPlayer] = useState({
+    username: "",
+    display_name: "",
+    number: "",
+  });
+  useEffect(() => {
+    if (teams) {
+      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+    }
+  }, [teams]);
+
+  if (teams) {
+    const activeTeam = teams.teams.filter(
+      (team) => team.id == teams?.activeTeam
+    )[0];
+    return (
+      <div className="team-panel">
+        <h1>{activeTeam.name}</h1>
+        <div className="stack column">
+          <input type="text" value={activeTeam.location || ""} disabled />
+          <input type="text" value={activeTeam.country || ""} disabled />
+          <hr style={{ width: "100%" }} />
+
+          <h2>players</h2>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "center",
+            }}
+          >
+            {players &&
+              players.map((player) => (
+                <div className="team-player" key={player.id}>
+                  {player.display_name}
+                </div>
+              ))}
+          </div>
+
+          <hr style={{ width: "100%" }} />
+          <div className="new-player-inputs">
+            <div>
+              <label>name</label>
+              <input
+                type="text"
+                value={newPlayer.display_name}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, display_name: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label>username</label>
+              <input
+                type="text"
+                value={newPlayer.username}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, username: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label>number</label>
+              <input
+                type="text"
+                value={newPlayer.number}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, number: e.target.value })
+                }
+              />
+            </div>
+          </div>
+          <button className="team-player" id="new-team-player">
+            add player
+          </button>
+        </div>
+      </div>
+    );
+  } else <span className="loader" />;
+};