#187419132--> product search

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
   plugins: ["react-refresh"],
   rules: {
     "react/react-in-jsx-scope": "off",
+    "import/no-named-as-default": "off",
     "react/jsx-props-no-spreading": "off",
     "implicit-arrow-linebreak":"off",
     "react/require-default-props": "off",
@@ -64,14 +65,14 @@ module.exports = {
     "react/no-array-index-key": "off",
     "no-promise-executor-return": "off",
     "jsx-a11y/control-has-associated-label": "off",
-    "jsx-a11y/no-static-element-interactions":"off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "max-len": "off",
     "react-hooks/exhaustive-deps": "off",
     "@typescript-eslint/semi": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "no-unsafe-optional-chaining": "off",
     "react/no-unescaped-entities": "off",
-    '@typescript-eslint/no-explicit-any': 0,
+    "@typescript-eslint/no-explicit-any": 0,
     "react/prop-types": "off",
     "jsx-a11y/control-has-associated-label": "off",
     "react-refresh/only-export-components": [

src/components/cards/ProductCard.tsx

@@ -27,7 +27,7 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
 
-  const soleilFN = (price: number) => {
+  const formatPrice = (price: number) => {
     if (price < 1000) {
       return price.toString();
     }
@@ -87,8 +87,9 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
   return (
     <div className="max-h-[270px] bg-[#F5F5F5] mb-2 relative" data-testid="tbt">
       {diff < 2 && (
-        <div className="absolute top-2 left-2" data-testid="new">
-          <p className="rounded-md z-40 text-white new-product">New</p>
+        <div className="absolute top-2 left-2 " data-testid="new">
+          {/* <p className=" rounded-md z-40  text-white new-product ">New</p> */}
+          {diff}
         </div>
       )}
       <ToastContainer />
@@ -155,7 +156,7 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
       <div className="flex items-center gap-1 p-1">
         <p className="text-red-400 text-[10px]" data-testid="price">
           $
-          {soleilFN(product.price)}
+          {formatPrice(product.price)}
         </p>
         <Rating
           value={4}

src/components/common/breadcrum/BreadCrum.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import { BiCross } from "react-icons/bi";
 import { FaFilter } from "react-icons/fa";
-import { Link, useLocation } from "react-router-dom";
+import { FcClearFilters } from "react-icons/fc";
+import { MdCurtainsClosed } from "react-icons/md";
+import { Link, useLocation, useSearchParams } from "react-router-dom";
 
 interface IBreadCrumbsProps {
   showFilters: boolean;
@@ -11,11 +14,18 @@ const BreadCrums: React.FC<IBreadCrumbsProps> = ({
   showFilters,
   toggleFilter,
 }) => {
+  const [searchParams, setSearchParams] = useSearchParams({
+    minPrice: "0",
+    maxPrice: "",
+    category: "",
+    name: "",
+  });
   const location = useLocation();
   let currentLink: string = "";
 
   const handleClick = () => {
     toggleFilter();
+    setSearchParams({});
   };
   const crums = location.pathname
     .split("/")
@@ -41,8 +51,7 @@ const BreadCrums: React.FC<IBreadCrumbsProps> = ({
           <FaFilter
             className={` transition duration-300 ${!showFilters ? " rotate-180 " : ""}`}
           />
-          {" "}
-          <span>Filters</span>
+          <span>Clear Filters</span>
         </div>
       )}
     </div>