Booking Page and Styling CSS file (Index) added

src/components/pages/Booking.js

+import Layout from "../ui/Layout";
+import { TextField, Button } from "@mui/material";
+import { useContext, useState, useEffect } from "react";
+import { context } from "../../utils/context/Provider";
+import server from "../../utils/server";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+import useSessionData from "../../utils/hooks/useSessionData";
+
+export default function Booking() {
+  /** @todo on the booking page user should enter the timing and date
+   * if the pitches is available it should book on that time slot
+   * now just let the available thing aside focus on the date and timing part
+   * */
+  //state for booking
+  const [data, setData] = useState({
+    time: "",
+    date: "",
+  });
+  const router = useNavigate();
+  const [sport, setSport] = useState({});
+  const user = useSessionData('user');
+
+  const store = useContext(context);
+
+  const getSportById = async () => {
+    try {
+      const res = await server.get(
+        `api/admin/sport/${store.data.selectedSport}`,
+      );
+      setSport(res.data.data);
+    } catch (err) {
+      if (typeof err === "string") {
+        toast.error(err);
+      } else if (err instanceof Error) {
+        toast.error(err.message);
+      } else {
+        toast.error("Server error");
+      }
+    }
+  };
+
+  const bookSportEvent = async () => {
+    try {
+
+      //write a api for booking a sport event
+      // propably have to check the pitches available on that time selected
+      const format = data.date + "T" + data.time;
+      const iso = new Date(format).toISOString();
+      const res = await server.post("api/admin/booking", {
+        datetime: iso,
+        sportId: sport.id,
+        userId: user.data.id
+      });
+      toast.success(res.data.message);
+      router("/");
+    } catch (err) {
+      if (typeof err === "string") {
+        toast.error(err);
+      } else if (err instanceof Error) {
+        toast.error(err.message);
+      } else {
+        toast.error("Server error");
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (store?.data.selectedSport) getSportById();
+  }, [store?.data.selectedSport]);
+  return (
+    <Layout>
+      <div className="form-flex-center">
+        <div className="form_container">
+          <div className="form_header">Sport Details {sport.name}</div>
+          <form className="form_flex">
+            <TextField
+              id="outlined-number"
+              label="Date"
+              placeholder="write name"
+              value={data.date}
+              type="date"
+              InputLabelProps={{
+                shrink: true,
+              }}
+              onChange={(e) =>
+                setData((prev) => ({ ...prev, date: e.target.value }))
+              }
+            />
+            <TextField
+              id="outlined-number"
+              label="Time"
+              placeholder="select the time"
+              value={data.name}
+              type="time"
+              InputLabelProps={{
+                shrink: true,
+              }}
+              onChange={(e) =>
+                setData((prev) => ({ ...prev, time: e.target.value }))
+              }
+            />
+            <Button className="edit_button ani_button" onClick={bookSportEvent}>
+              Book
+            </Button>
+          </form>
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/components/pages/index.css

+.home_grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  padding: 2rem;
+  place-content: center;
+  max-width: 1200px;
+  margin-inline: auto;
+}
+
+.form_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  max-width: 600px;
+  border-radius: 8px;
+  margin-inline: auto;
+  background-color: #fff;
+  padding: 0 0 2rem 0;
+}
+
+.form_header {
+  padding: 3rem;
+  font-size: 2rem;
+}
+
+.form_flex {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1rem;
+  width: 80%;
+}
+
+.edit_button {
+  background-color: var(--primary-color) !important;
+  color: white !important;
+  text-transform: capitalize !important;
+}
+
+@keyframes button {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.ani_button:hover {
+  animation: button 0.5s ease;
+}
+
+.search_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  max-width: 1000px;
+  margin-inline: auto;
+}
+.search_input {
+  flex-basis: 100%;
+
+  padding: 0.75rem;
+  border-radius: 1rem;
+  outline: none;
+  border: 2px solid var(--secondary-color);
+}
+.search_input:focus {
+  border: 2px solid skyblue;
+}
+.create_button {
+  flex-basis: min(200px, 25%);
+}
+
+.form-flex-center {
+  padding: 4rem;
+}
+
+.home_description {
+  padding: 2rem;
+  color: #fff;
+  font-size: 1.5rem;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+
+@media screen and (max-width: 960px) {
+  .home_description {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 2rem;
+  }
+}
+.home_description > img {
+  flex-basis: 50%;
+  width: 400px;
+}
+.home_description > p {
+  flex-basis: 50%;
+}
+.home_description > p > span {
+  font-size: 2rem;
+}
+.goto_sports {
+  background-color: black;
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  color: #fff;
+  float: right;
+  margin-top: 1rem;
+}
+.book_button {
+  background-color: black;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  color: #fff;
+  float: right;
+}
+
+.card-flex {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.booked_list_flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+.booked_title {
+  text-align: center;
+}
+
+.list_image {
+  width: 60px;
+}
+
+@media screen and (max-width: 640px) {
+  .form_flex {
+    gap: 1rem;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .home_grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+    padding: 2rem;
+  }
+}
+
+@media screen and (max-width: 460px) {
+  .home_grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 2rem;
+    padding: 2rem;
+  }
+}