From cfd24c7f586ab19eec04997a3c5352b6a5e975e7 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 28 Jun 2023 13:18:38 +0000
Subject: [PATCH] #50 Add popular travelers to mobile and reduce to 4

---
 src/pages/travelers/PopularTravelers.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/pages/travelers/PopularTravelers.js b/src/pages/travelers/PopularTravelers.js
index 8517aea..ffc8785 100644
--- a/src/pages/travelers/PopularTravelers.js
+++ b/src/pages/travelers/PopularTravelers.js
@@ -5,7 +5,7 @@ import { axiosReq } from "../../api/axiosDefaults";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 import Asset from "../../components/Asset";
 
-const PopularTravelers = () => {
+const PopularTravelers = ({ mobile }) => {
   const [travelerData, setTravelerData] = useState({
     pageTraveler: { results: [] },
     popularTravelers: { results: [] },
@@ -32,13 +32,25 @@ const PopularTravelers = () => {
   }, [currentUser]);
 
   return (
-    <Container className={appStyles.Container}>
+    <Container
+      className={`${appStyles.Content} ${
+        mobile && "d-lg-none text-center mb-3"
+      }`}
+    >
       {popularTravelers.results.length ? (
         <>
-          <p>Most followed travelers</p>
-          {popularTravelers.results.map((traveler) => (
-            <p key={traveler.id}>{traveler.owner}</p>
-          ))}
+          <p className="d-flex justify-content-center">Most followed travelers</p>
+          {mobile ? (
+            <div className="d-flex justify-content-around">
+              {popularTravelers.results.slice(0, 4).map((traveler) => (
+                <p key={traveler.id}>{traveler.owner}</p>
+              ))}
+            </div>
+          ) : (
+            popularTravelers.results
+              .slice(0, 4)
+              .map((traveler) => <p key={traveler.id}>{traveler.owner}</p>)
+          )}
         </>
       ) : (
         <Asset spinner />