From c33841ecb1f20802d4244f7fe96285f8049f8cb2 Mon Sep 17 00:00:00 2001
From: tamalCodes <tamalcodes@gmail.com>
Date: Wed, 4 Dec 2024 19:45:09 +0530
Subject: [PATCH] fix: more changes to UI

---
 src/components/private/landing/Landing.jsx |  3 +-
 src/components/shared/navbar/Navbar.scss   |  3 +-
 src/pages/Home.jsx                         |  6 +-
 src/pages/clubs/Clubs.jsx                  | 40 +++++++----
 src/pages/clubs/Clubs.scss                 | 80 +++++++++++++++++++++-
 src/pages/events/all/Events.jsx            | 12 +---
 src/pages/events/all/Events.scss           |  5 +-
 7 files changed, 118 insertions(+), 31 deletions(-)

diff --git a/src/components/private/landing/Landing.jsx b/src/components/private/landing/Landing.jsx
index 9df2e4a6..cab4dc9d 100644
--- a/src/components/private/landing/Landing.jsx
+++ b/src/components/private/landing/Landing.jsx
@@ -2,7 +2,7 @@ import { selectIsLoggedIn } from "@redux/slice/userSlice";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import Vector from "../../../assets/pictures/Banner/Vector.png";
-import { Button } from "../../shared";
+import { Button, Navbar } from "../../shared";
 import "./Landing.scss";
 
 const Landing = () => {
@@ -21,6 +21,7 @@ const Landing = () => {
 
   return (
     <>
+      <Navbar />
       <div className="container landing_parent">
         <img src={Vector} alt="" className="Landing_bg" />
 
diff --git a/src/components/shared/navbar/Navbar.scss b/src/components/shared/navbar/Navbar.scss
index 4594d0fd..acf39147 100644
--- a/src/components/shared/navbar/Navbar.scss
+++ b/src/components/shared/navbar/Navbar.scss
@@ -4,7 +4,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  z-index: 100;
+  position: sticky;
+  z-index: 9999;
 
   @media screen and (max-width: 430px) {
     padding: 0.8rem 1.5rem;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 05948e08..91da1ba9 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,9 +1,9 @@
 import Cookies from "js-cookie";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useDispatch } from "react-redux";
 import { Landing } from "../components/private/index.js";
-import { Footer, Navbar } from "../components/shared";
+import { Footer } from "../components/shared";
 import { toggleUserLogin, updateUserData } from "../redux/slice/userSlice.js";
 import { successCallback } from "../service/MilanApi.js";
 import { showErrorToast, showSuccessToast } from "../utils/Toasts.js";
@@ -40,8 +40,6 @@ const Home = () => {
         <link rel="canonical" href="/" />
       </Helmet>
 
-      <Navbar />
-
       <Landing />
 
       <Footer />
diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx
index 2deada8a..6b6c467e 100644
--- a/src/pages/clubs/Clubs.jsx
+++ b/src/pages/clubs/Clubs.jsx
@@ -1,18 +1,16 @@
-import { useQuery } from "@tanstack/react-query";
-import { ClubCard, Footer, Loading, Navbar } from "../../components/shared";
-import { getClubs } from "../../integrations/Clubs";
+import { CiFilter } from "react-icons/ci";
+import { PiCaretLeftBold } from "react-icons/pi";
+import {
+  Button,
+  ClubCard,
+  Footer,
+  Loading,
+  Navbar,
+} from "../../components/shared";
 import ComponentHelmet from "../../utils/ComponentHelmet";
 import "./Clubs.scss";
 
 const Clubs = () => {
-  const { data, isLoading } = useQuery({
-    queryKey: ["clubsData"],
-    queryFn: getClubs,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    retry: 2,
-  });
-
   // demo 20 array of clubs
   const clubs = Array.from({ length: 20 }, () => ({
     _id: "673ac2814c6e89e58af8ca11",
@@ -30,8 +28,26 @@ const Clubs = () => {
       <ComponentHelmet type="Clubs" />
       <Navbar />
 
+      <div className="clubs_header">
+        <div className="clubs_search_parent">
+          <input
+            type="text"
+            name=""
+            id=""
+            placeholder="Type to begin search, or use the filters"
+          />
+          <button>
+            Filters <CiFilter />
+          </button>
+        </div>
+
+        <Button className="viewdashboard">
+          Your Dashboard <PiCaretLeftBold />
+        </Button>
+      </div>
+
       <div className="clubs_parent">
-        {isLoading || !clubs || clubs?.length === 0 ? (
+        {!clubs || clubs?.length === 0 ? (
           <Loading />
         ) : (
           clubs?.map((club, id) => <ClubCard club={club} key={id} />)
diff --git a/src/pages/clubs/Clubs.scss b/src/pages/clubs/Clubs.scss
index a01554c7..2f551654 100644
--- a/src/pages/clubs/Clubs.scss
+++ b/src/pages/clubs/Clubs.scss
@@ -1,5 +1,83 @@
+.clubs_header {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 2rem 8rem;
+  margin: 0 3rem;
+  font-family: var(--outfit);
+
+  .clubs_search_parent {
+    background-color: #fff;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 1rem;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.04);
+    width: 100%;
+    height: 62px;
+
+    input {
+      padding: 0.5rem 1rem;
+      border: 1px solid #00000041;
+      border-radius: 5px;
+      font-size: 15px;
+      font-family: var(--outfit);
+      outline: none;
+      flex-grow: 1;
+      background-color: #f5f7f7;
+    }
+
+    button {
+      border: 1px solid #00000041;
+      background-color: #f5f7f7;
+      padding: 0.5rem 1rem;
+      border-radius: 5px;
+      font-size: 15px;
+      font-family: var(--outfit);
+      outline: none;
+      width: 15%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+
+      svg {
+        min-width: 20px;
+        min-height: 20px;
+      }
+    }
+  }
+
+  .viewdashboard {
+    border: 2px solid #ff5a317a;
+    font-size: 15px;
+    font-family: var(--outfit);
+    outline: none;
+    text-align: center;
+    justify-content: center;
+    height: 55px;
+    white-space: nowrap;
+    border-radius: 8px;
+    background-color: #fba18b55;
+    color: #ff5a31f0;
+    font-weight: 600;
+    width: 20%;
+    display: flex;
+    align-items: center;
+
+    svg {
+      rotate: 180deg;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
 .clubs_parent {
-  padding: 2rem 7rem;
+  padding: 2rem 8rem;
   min-height: 100vh;
   margin: 0 3rem;
   display: grid;
diff --git a/src/pages/events/all/Events.jsx b/src/pages/events/all/Events.jsx
index 8d76d4f6..53deedfa 100644
--- a/src/pages/events/all/Events.jsx
+++ b/src/pages/events/all/Events.jsx
@@ -1,8 +1,6 @@
-import { getClubs } from "@/integrations/Clubs";
 import { Button, Footer, Loading, Navbar } from "@components/shared";
 import EventCard from "@components/shared/cards/event/EventCard";
 import EventSlider from "@components/shared/cards/event/EventSlider";
-import { useQuery } from "@tanstack/react-query";
 import ComponentHelmet from "@utils/ComponentHelmet";
 import { CiFilter } from "react-icons/ci";
 import { FaPlus } from "react-icons/fa6";
@@ -13,14 +11,6 @@ import "swiper/css/pagination";
 import "./Events.scss";
 
 const Events = () => {
-  const { data, isLoading } = useQuery({
-    queryKey: ["clubsData"],
-    queryFn: getClubs,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    retry: 2,
-  });
-
   // demo 20 array of clubs
   const events = Array.from({ length: 20 }, () => ({
     _id: "673ac2814c6e89e58af8ca11",
@@ -61,7 +51,7 @@ const Events = () => {
       <hr className="events_separator" />
 
       <div className="events_parent">
-        {isLoading || !events || events?.length === 0 ? (
+        {!events || events?.length === 0 ? (
           <Loading />
         ) : (
           events?.map((event, id) => <EventCard event={event} key={id} />)
diff --git a/src/pages/events/all/Events.scss b/src/pages/events/all/Events.scss
index 982a71d2..7fedd111 100644
--- a/src/pages/events/all/Events.scss
+++ b/src/pages/events/all/Events.scss
@@ -37,7 +37,7 @@
       font-size: 15px;
       font-family: var(--outfit);
       outline: none;
-      width: 10%;
+      width: 15%;
       text-align: center;
       display: flex;
       align-items: center;
@@ -65,6 +65,9 @@
     color: #ff5a31f0;
     font-weight: 600;
     width: 20%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
   }
 }