add provisional tournament component without functionality

sth-frontend/src/App.js

 import logo from './logo.svg';
 import './App.css';
+import Tournament from "./Tournament";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+    <Tournament />
+  </div>
 }
 
 export default App;

sth-frontend/src/Tournament.js

+import {useState} from "react";
+
+export default function Tournament() {
+    return (
+        <div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
+            <div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+            </div>
+            <div className="secondPhase" style={{display: "flex", flexDirection:"column", justifyContent: "space-around"}}>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+            </div>
+            <div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
+                <div className="match">
+                    <Bracket/>
+                    <Bracket/>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function Bracket({highlight, onScoreChange}) {
+    if (highlight) {
+        document.getElementById('bracketWrapper').style.border = "3px solid black"
+    }
+    return <div id="bracketWrapper" style={{display: "flex",flexDirection:"row" ,padding: "10px", border: "1px solid black", width: "fit-content"}}>
+        <div id="teamNameWrapper" style={{display: "flex", flexDirection: "column"}}>
+            <label htmlFor="teamName" style={{fontSize: "8pt"}}>teamname</label>
+            <input id="teamName" type="text"/>
+        </div>
+        <div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
+            <label htmlFor="score" style={{fontSize: "8pt"}}>score</label>
+            <input id="score" type="number" style={{width: "35px"}} onChange={() => onScoreChange(document.getElementById('score').value)}/>
+        </div>
+    </div>
+}
\ No newline at end of file