Athlete list

front/package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

front/src/App.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import Router from "./Router";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 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>
+      <Router />
     </div>
   );
 }

front/src/Router.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Home from "./components/Home";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Sponsor from "./components/Sponsor";
+import Athlete from "./components/Athlete/Athlete";
+const Router = () => {
+  return (
+    <div>
+      <BrowserRouter>
+        <Routes>
+          <Route exact path="/" element={<Home />} />
+          <Route path="/sponsor" element={<Sponsor />} />
+          <Route path="/athlete" element={<Athlete />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+};
+
+export default Router;

front/src/components/Athlete/Athlete.jsx

@@ -0,0 +1,45 @@
+import React, { useState} from "react";
+import Navigation from "../Navigation";
+import AthleteList from "./AthleteList";
+
+const dataSponsor =[
+    {
+        "name": "blabla",
+        "about": "adzeferfvdvv"
+    },
+    {
+        "name": "cc",
+        "about": "adzeferfvdvv"
+
+    },
+    {
+        "name": "aa",
+        "about": "adzeferfvdvv"
+
+    },
+    {
+        "name": "tt",
+        "about": "adzeferfvdvv"
+
+    },
+
+]
+const Athlete = () => {
+
+    const [dataSponsor, setDataSponsor] = useState("");
+    return (
+        <div>Athlete
+            <Navigation />
+            <div style={{display: "flex"}}>
+                <div>
+                 <AthleteList setDataSponsor={setDataSponsor} />
+                </div>
+                <div>
+                    {/* <About dataSponsor={dataSponsor}  /> */}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Athlete;

front/src/components/Athlete/AthleteList.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+const data = [
+    {
+        "name": "dedfd",
+        "about": "jhfebkjhfbk",
+    },
+    {
+        "name": "ddd",
+        "about": "jhfebkjhfbk",
+    },
+    {
+        "name": "ggg",
+        "about": "jhfebkjhfbk",
+    },
+    {
+        "name": "hhh",
+        "about": "jhfebkjhfbk",
+    },
+    {
+        "name": "qqqq",
+        "about": "jhfebkjhfbk",
+    },
+]
+const AthleteList =(props)=> {
+    return(<div>
+        {data.map(v => (
+        <h1 onClick={() => props.setDataSponsor(v)}>
+            {v.name}
+        </h1>))}
+    </div>)
+}
+
+export default AthleteList;

front/src/components/Home.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Navigation from "./Navigation";
+const Home = () => {
+  return <div>
+    Home
+    <Navigation />
+  </div>;
+};
+
+export default Home;

front/src/components/Navigation.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const Navigation = () =>{
+    const navigate = useNavigate();
+
+    return(<div>
+        <button onClick={() => navigate("/")} class="btn btn-primary">Home</button>
+        <button onClick={() => navigate("/athlete")}>Athlete</button>
+        <button onClick={() => navigate("/sponsor")}>Sponsor</button>
+    </div>)
+}
+
+export default Navigation;
+

front/src/components/Sponsor.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Navigation from "./Navigation";
+
+
+const Sponsor = () => {
+    return (<div>
+        Sponsor
+        <Navigation />
+    </div>)
+}
+
+export default Sponsor;

front/src/components/sponsors.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const sponsors = () => {
+  return (
+    <div>sponsors</div>
+
+  )
+}
+
+export default sponsors