From 2f078a728f87193529acfb4e86065a2179c51827 Mon Sep 17 00:00:00 2001
From: himanshu mishra <himanshu.mishra0913@gmail.com>
Date: Sat, 9 Nov 2024 12:23:04 +0530
Subject: [PATCH] Fixed the cards UI in the play part, fixed the navlink of the
 header, now the part which is active only that is highlighted and have added
 an alert in the stream event and corporates part saying that part of the
 website is not yet ready

---
 src/assets/styles/Play.css      |  9 ++++--
 src/assets/styles/PlaysList.css |  2 +-
 src/components/NavBar.js        | 51 +++++++++++++++------------------
 src/components/Play.js          | 10 +++++--
 4 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/assets/styles/Play.css b/src/assets/styles/Play.css
index 1eb14a4..6731e67 100644
--- a/src/assets/styles/Play.css
+++ b/src/assets/styles/Play.css
@@ -7,6 +7,9 @@
   }
   
   .play {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     border-radius: 15px;
     overflow: hidden;
     width: 250px;
@@ -27,15 +30,15 @@
   
   .play-poster {
     width: 100%;
-    height: auto;
+    /* height: auto; */
     border-radius: 10px 10px 0 0;
-    margin-bottom: 40px;
+    margin-bottom: 20px;
   }
   
   .play-ranking {
     position: absolute;
     text-align: left;
-    bottom: 100px;
+    top: 50%;
     width: 230px;
     color: var(--text-color);
     background-color: rgba(0, 0, 0, 0.8);
diff --git a/src/assets/styles/PlaysList.css b/src/assets/styles/PlaysList.css
index b61c115..8069f26 100644
--- a/src/assets/styles/PlaysList.css
+++ b/src/assets/styles/PlaysList.css
@@ -9,7 +9,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    min-height: 100vh;
+    /* min-height: 100vh; */
     margin-inline: auto;
     position: relative;
 
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 7e4353d..e459a36 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,39 +1,39 @@
-import React, { useState } from "react";
-import { NavLink } from "react-router-dom"; // Import Link from react-router-dom
+import React from "react";
+import { NavLink } from "react-router-dom";
 import "../assets/styles/NavBar.css";
 
 const Navbar = () => {
-  const [activeLink, setActiveLink] = useState("Movies");
+  const handleComingSoon = (event) => {
+    event.preventDefault(); // Prevents navigation
+    alert("This part of the website is not yet prepared.");
+  };
 
   return (
     <nav className="navbar secondsnav">
-      <div className="container mx-auto px-4 py-3 flex justify-center items-center gap-x-10" style={{justifyContent:"center"}}>
+      <div className="container mx-auto px-4 py-3 flex justify-center items-center gap-x-10" style={{ justifyContent: "center" }}>
         <div className="flex space-x-8">
           <NavLink
             to="/movies"
-            className={`nav-link ${activeLink === "Movies" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Movies
           </NavLink>
-          <NavLink
-            to="/stream-events"
-            className={`nav-link ${
-              activeLink === "Stream Events" ? "active" : ""
-            }`}
+          <span
+            onClick={handleComingSoon} // Show alert on click
+            className="nav-link"
+            style={{ cursor: "pointer" }}
           >
             Stream Events
-          </NavLink>
+          </span>
           <NavLink
             to="/plays"
-            className={`nav-link ${activeLink === "Plays" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Plays
           </NavLink>
           <NavLink
             to="/sports-activities"
-            className={`nav-link ${
-              activeLink === "Sports Activities" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Sports Activities
           </NavLink>
@@ -43,31 +43,26 @@ const Navbar = () => {
         <div className="flex space-x-8">
           <NavLink
             to="/list-shows"
-            className={`nav-link ${
-              activeLink === "List Your Show" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             List Your Show
           </NavLink>
-          <NavLink
-            to="/corporates"
-            className={`nav-link ${
-              activeLink === "Corporates" ? "active" : ""
-            }`}
+          <span
+            onClick={handleComingSoon} // Show alert on click
+            className="nav-link"
+            style={{ cursor: "pointer" }}
           >
             Corporates
-          </NavLink>
+          </span>
           <NavLink
             to="/offers"
-            className={`nav-link ${activeLink === "Offers" ? "active" : ""}`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Offers
           </NavLink>
           <NavLink
             to="/gift-cards"
-            className={`nav-link ${
-              activeLink === "Gift Cards" ? "active" : ""
-            }`}
+            className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
           >
             Gift Cards
           </NavLink>
diff --git a/src/components/Play.js b/src/components/Play.js
index c6a4acc..02c31d9 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -4,15 +4,19 @@ import { Link } from "react-router-dom";
 
 function Play({ id, image, name, ranking, participants, category }) {
   return (
-    <div className="play">
-      <img src={image} alt={`${name} image`} className="play-poster" />
+    <div className="play h-96">
+      <img src={image} alt={`${name} image`} className="play-poster h-1/2" />
       <p className="play-ranking">
+        <span className="pr-4">
         <span className="ranking-badge">🎭</span>
         <span className="ranking-points"> {ranking} </span>
-        <span className="participants">({participants} Participants)</span>
+        </span>
+        <span className="participants pl-5">({participants} Participants)</span>
       </p>
+      <div className="pt-3">
       <h2 className="play-name">{name}</h2>
       <p className="play-category">{category}</p>
+      </div>
       <Link to={`/plays/${id}`}>
         <button className="more-details-button">More Details</button>
       </Link>