sponsor item

front/src/App.css

@@ -36,3 +36,25 @@
     transform: rotate(360deg);
   }
 }
+
+.column-sponsor {
+  background: #fff;
+  max-width: 50%;
+  width: 50%;
+  float: left;
+  height: 100vh;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &:last-child {
+    background: black;
+    border-top: 1px solid rgba(255,255,255,0.5);
+  }
+  @media (max-width: 600px) {
+    max-width: 100%;
+    width: 100%;
+  }
+}

front/src/Router.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Home from "./components/Home";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Sponsor from "./components/Sponsor";
+import Sponsor from "./components/Sponsor/Sponsor";
 import Athlete from "./components/Athlete/Athlete";
 const Router = () => {
   return (

front/src/components/Home.jsx

@@ -1,9 +1,23 @@
 import React from "react";
 import Navigation from "./Navigation";
+import { useNavigate } from "react-router-dom";
 const Home = () => {
+
+  const navigate = useNavigate();
+
+  const handleSubmit = () => navigate('/sponsor');
+
   return <div>
     Home
     <Navigation />
+
+      <div className="m-5 text-end">
+        <form onSubmit={handleSubmit}>
+          <input type="text" placeholder="" />
+          <input type="submit" className="btn btn-primary"/>
+        </form>
+      </div>
+
   </div>;
 };
 

front/src/components/Sponsor/Sponsor.jsx

@@ -0,0 +1,60 @@
+import React, {useState} from "react";
+import Navigation from "../Navigation";
+import sponsors from '../../database/sponsors.json'
+import SponsorItem from "./SponsorItem";
+
+const Sponsor = () => {
+
+
+    const [selected, setSelected] = useState(null)
+
+    const handleClick = (id) => {
+
+      setSelected(sponsors.filter(element => element._id === id))
+    }
+
+    return (
+    <div >
+        Sponsor
+        <Navigation />
+
+
+        <div className="d-flex">
+
+          <div className="d-flex justify-content-around flex-wrap gap-5 container mt-5 column-sponsor">
+              {
+                sponsors.map(({_id, company, email, picture}) => {
+                  return (
+
+                      <div key={_id}
+                      className="card rounded"
+                      style={{width: '18rem'}}
+                      onClick={() => handleClick(_id)}
+                      >
+                        <img src={picture} alt={company} className="card-img-top" />
+                          <div className="card-body">
+                            <h3 className="card-title">{company}</h3>
+                            <p className="card-text">{email}</p>
+                          </div>
+                      </div>
+
+                  )
+                })
+
+              }
+          </div>
+
+        <div className="sponsor-item column-sponsor bg-success m-5">
+
+            <SponsorItem sponsor={selected} />
+
+        </div>
+
+        </div>
+
+
+
+    </div>)
+}
+
+export default Sponsor;

front/src/components/Sponsor/SponsorItem.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const SponsorItem = ({sponsor}) => {
+
+  console.log(sponsor)
+
+  const falseData =
+    {
+      about: "empty",
+      company: "empty",
+      sports: [],
+      phone: "empty",
+      isActive: false
+    }
+
+
+  const {about, company, sports, phone, isActive} = sponsor ?? falseData
+
+  return (
+
+    <div className="border-primary rounded m-5">
+
+      <h3 >{company}</h3>
+
+      <p>{about}</p>
+
+    </div>
+  )
+}
+
+export default SponsorItem