resolving bugs

src/assets/styles/Search.scss

@@ -1,83 +1,91 @@
-.wrappers{
+.wrappers {
   background-color: $container-color;
+
   .upper-side {
-          display: flex;
-          align-items: center;
-          height: 10rem;
-          font-size: 1.5rem;
-         padding: 5rem;
-         border-bottom: 2px solid rgba(119, 119, 119, 0.49);
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+    padding: 2rem 5rem;
+    border-bottom: 2px solid rgba(119, 119, 119, 0.49);
+
+    .product-name {
+      font-size: 2rem;
+      font-weight: 700;
+      color: $text-color;
+      margin-right: 2rem;
+    }
+
+    .filter-option {
+      display: flex;
+      gap: 10rem;
+
+      .selection-part {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+        font-size: 2rem;
+        font-weight: 700;
+        color: $text-color;
+
+      }
+
+      .search-Span-price {
+        font-size: 2rem;
+        font-weight: 700;
+        color: $text-color;
+        margin-right: 2rem;
+      }
+
+      .dropdown-select {
+
+        gap: 2rem;
+        font-size: 2rem;
+        font-weight: 700;
+        color: $text-color;
+        border: 1px solid rgba(255, 109, 24, 0.49);
+        border-radius: 4px;
+        padding: 0.5rem 2rem;
+        font-size: 15px;
+        cursor: pointer;
+      }
+    }
+
+    .discount-display {
+      font-size: 2rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .product-main {
+    display: flex;
+
+    .product-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 3rem 3rem;
+      margin-left: 5rem;
+      gap: 3rem;
+    }
+
+    .loader-spinner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 70rem;
+      margin-top: 20rem;
+    }
 
-         .product-name{
-           font-size: 2rem;
-           font-weight: 700;
-           color: $text-color;
-           margin-right: 2rem;
-         }
+    .noResult {
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 1rem;
 
-         .filter-option{
-           display: flex;
-           gap: 10rem;
-
-           .selection-part{
-             display: flex;
-             align-items: center;
-             gap: 2rem;
-             font-size: 2rem;
-             font-weight: 700;
-             color: $text-color;
-
-           }
-           .search-Span-price{
-            font-size: 2rem;
-            font-weight: 700;
-            color: $text-color;
-            margin-right: 2rem;
-          }
-           .dropdown-select{
-
-             gap: 2rem;
-             font-size: 2rem;
-             font-weight: 700;
-             color: $text-color;
-             border: 1px solid rgba(255, 109, 24, 0.49);
-            border-radius: 4px;
-            padding: 0.5rem 2rem ;
-            font-size: 15px;
-            cursor: pointer;
-           }
-         }
-         .discount-display{
-          font-size: 2rem;
-          display: flex;
-          align-items: center;
-         }
-        }
-        .product-main{
-          display: flex;
-          .product-list{
-            display: flex;
-            flex-wrap: wrap;
-            margin: 3rem 3rem;
-            margin-left: 5rem;
-            gap: 3rem;
-          }
-          .loader-spinner {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: 70rem;
-            margin-top: 20rem;
-          }
-          .noResult{  
-          margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 1rem;
-            img{
-              width: auto;
-              height: 400px;
-            }
-          }
-        }  
+      img {
+        width: auto;
+        height: 400px;
+      }
+    }
+  }
 }

src/router.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable*/
 /* eslint-disable */
 import React from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, } from "react-router-dom";
 import LandingPage from "./pages/LandingPage";
 import { SignUp } from "./pages/SignUp";
 import NotFound from "./pages/NotFound";
@@ -17,6 +17,7 @@ import ViewProduct from "./pages/ViewProduct";
 import UserLogin from "./pages/UserLogin";
 import SellerLogin from "./pages/SellerLogin";
 import AdminLogin from "./pages/AdminLogin";
+import Search from "./pages/Search";
 
 const AppRouter: React.FC = () => {
   return (

src/utils/types/product.d.ts

@@ -1,44 +1,56 @@
-/* eslint-disable @typescript-eslint/indent */
-export interface IProduct {
-    id: string;
-    shopId: string;
-    name: string;
-    description?: string;
-    price: number;
-    discount?: string;
-    category: string;
-    expiryDate?: Date;
-    expired: boolean;
-    bonus?: string;
-    images: string[];
-    quantity: number;
-    status: string;
-    createdAt: Date;
-    updatedAt: Date;
-    productReviews: IProductReview[];
-    shops: IShop;
-}
-
-export interface IProductReview {
-    id: string;
-    productId: string;
-    userId: string;
-    feedback: string;
-    rating: number;
-    status: boolean;
-    createdAt: Date;
-    updatedAt: Date;
-    user?: {
-        firstName?: string;
-        lastName?: string;
-        profilePicture?: string;
-    }
-}
-
-export interface IShop {
-    id: string;
-    userId: string;
-    name: string;
-    description?: string;
-    image?: string;
-}
+/* eslint-disable */
+export interface IProducts {
+    nextPage:number;
+    currentPage: number;
+    previousPage:number;
+    limit:number;
+    data:[];
+    error?:string
+  }
+  export interface IProductsState {
+    searchProduct: searchProduct;
+  }
+
+  export interface IProduct {
+    id: string;
+    shopId: string;
+    name: string;
+    description?: string;
+    price: number;
+    discount?: string;
+    category: string;
+    expiryDate?: Date;
+    expired: boolean;
+    bonus?: string;
+    images: string[];
+    quantity: number;
+    status: string;
+    createdAt: Date;
+    updatedAt: Date;
+    productReviews: IProductReview[];
+    shops: IShop;
+  }
+
+  export interface IProductReview {
+    id: string;
+    productId: string;
+    userId: string;
+    feedback: string;
+    rating: number;
+    status: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+    user?: {
+        firstName?: string;
+        lastName?: string;
+        profilePicture?: string;
+    }
+  }
+
+  export interface IShop {
+    id: string;
+    userId: string;
+    name: string;
+    description?: string;
+    image?: string;
+  }

src/utils/types/store.d.ts

@@ -96,4 +96,12 @@ export interface INotificationInitialResource {
   message: string | null,
   passwordExpiryMessage: string | null,
   isLoggedOut: boolean
-}
+}
+
+export interface SearchCriteria {
+  name?: string;
+  category?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  discount?: number;
+}