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
samyakmaitre · Nov 9, 2024 · 2f078a7 · 2f078a7
1 parent bc125e6
commit 2f078a7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>