add no select cars

luzhnyak · Feb 17, 2024 · ca7e6ca · ca7e6ca
1 parent 868b217
commit ca7e6ca
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/components/Favorites/Favorites.jsx b/src/components/Favorites/Favorites.jsx
@@ -5,6 +5,7 @@ import css from "./Favorites.module.css";
 import { selectAllFavoritesCars } from "../../redux/favorites/selectors";
 
 import Card from "../Card/Card";
+import { Link } from "react-router-dom";
 
 const Favorites = () => {
   const cars = useSelector(selectAllFavoritesCars);
@@ -13,10 +14,16 @@ const Favorites = () => {
     <>
       <div className={css.container}>
         <section className={css.sectionCatalog}>
-          {cars.length &&
+          {cars?.length > 0 ? (
             cars.map((car) => {
               return <Card key={car.id} data={car} />;
-            })}
+            })
+          ) : (
+            <p className={css.noSelect}>
+              No selected cars yet. Explore our{" "}
+              <Link to="/catalog">catalog</Link> now.
+            </p>
+          )}
         </section>
       </div>
     </>

diff --git a/src/components/Favorites/Favorites.module.css b/src/components/Favorites/Favorites.module.css
@@ -13,3 +13,16 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.noSelect {
+  margin-top: 100px;
+  font-size: 20px;
+  a {
+    text-decoration: none;
+    font-weight: 600;
+    color: var(--primary-color-blue);
+    &:hover {
+      color: var(--active-color-blue);
+    }
+  }
+}