Frontend

sth-frontend/src/App.jsx

 import Navbar from "./layouts/Navbar";
 import {Outlet} from "react-router-dom";
 import "./index.css"
-import Test from "./components/Test";
 
 function App() {
   return (

sth-frontend/src/components/Test.jsx

-export default function Test({style}) {
-    return (
-        <div className={`font-bold ${style}`}>
-            <h1>Test</h1>
-        </div>
-    )
-}
\ No newline at end of file

sth-frontend/src/features/tournament/components/BracketingRound.jsx

+import Match from "./Match";
+
+export default function BracketingRound({matchesNum}) {
+    const matches = [];
+
+    for (let i = 0; i < matchesNum; i++) {
+        matches.push(<Match style={i + 1} key={i} />)
+
+    }
+
+    return(
+        <div className={'flex-col justify-around w-40 h-[500px] bg-blue-500 border-spacing-1 border-2 m-3 border-amber-500 flex'}>
+            {matches}
+        </div>
+    )
+}
\ No newline at end of file

sth-frontend/src/features/tournament/components/BracketingTree.jsx

+import BracketingRound from "./BracketingRound";
+
+export default function BracketingTree({roundsNum}) {
+
+    const rounds = [];
+
+    for (let i = 0; i < roundsNum; i++) {
+        rounds.push(<BracketingRound    key={i} matchesNum={roundsNum - i * 2 } />)
+    }
+
+    return (
+        <div className={'flex flex-row justify-center'}>
+            {rounds}
+        </div>
+    )
+}
\ No newline at end of file

sth-frontend/src/features/tournament/components/Match.jsx

+
+export default function Match({style}) {
+    return(
+        <div className={`bg-green-600 w-24 h-12 border-2 border-b-fuchsia-600`}>
+
+        </div>
+    )
+}
\ No newline at end of file

sth-frontend/src/features/tournament/components/Tournament.jsx

+import BracketingTree from "./BracketingTree";
+
+
+export default function Tournament() {
+
+
+    return(
+        <div>
+            <BracketingTree roundsNum={4}/>
+        </div>
+    )
+}
\ No newline at end of file

sth-frontend/src/features/tournament/index.jsx

+
+

sth-frontend/src/index.jsx

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {RouterProvider} from "react-router-dom";
-import router from "./router";
+import router from "./utils/router";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

sth-frontend/src/router.jsx → sth-frontend/src/utils/router.jsx

 import {createBrowserRouter} from "react-router-dom";
-import Tournament from "./pages/Tournament";
-import App from "./App";
+import Tournament from "../features/tournament/components/Tournament";
+import App from "../App";
 
 const router = createBrowserRouter([
     {
@@ -10,8 +10,6 @@ const router = createBrowserRouter([
             {path: "", element: <Tournament/>},
         ]
     },
-
-
 ])