Merge pull request #922 from NSUWAL123/fix-project-detail-mobile-footer

fix (projectDetails): dynamic grid-col removed due to issues, footerI…
hotosm · Oct 18, 2023 · eff5a11 · eff5a11
2 parents 9eb313f + 9d141c0
commit eff5a11
Showing 1 changed file with 27 additions and 25 deletions.
diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -65,36 +65,38 @@ const MobileFooter = () => {
       ),
     },
   ];
+  const FooterItemList = ({ item }) => {
+    return (
+      <div
+        onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item?.id))}
+        className="fmtm-group fmtm-cursor-pointer"
+      >
+        <div
+          className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
+            mobileFooterSelection === item?.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
+          }`}
+        >
+          <div>{item?.icon}</div>
+        </div>
+        <div className="fmtm-flex fmtm-justify-center">
+          <p
+            className={`${
+              mobileFooterSelection === item?.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+            } fmtm-duration-300 fmtm-text-xs fmtm-whitespace-nowrap`}
+          >
+            {item?.title}
+          </p>
+        </div>
+      </div>
+    );
+  };
   return (
     <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
       <div
-        className={`fmtm-w-full fmtm-grid fmtm-grid-cols-${
-          footerItem.length - 1
-        } fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
+        className={`fmtm-w-full fmtm-grid fmtm-grid-cols-5 fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
       >
         {footerItem.map((item) => (
-          <div
-            key={item?.id}
-            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item?.id))}
-            className="fmtm-group fmtm-cursor-pointer"
-          >
-            <div
-              className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
-                mobileFooterSelection === item?.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
-              }`}
-            >
-              <div>{item?.icon}</div>
-            </div>
-            <div className="fmtm-flex fmtm-justify-center">
-              <p
-                className={`${
-                  mobileFooterSelection === item?.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
-                } fmtm-duration-300 fmtm-text-xs fmtm-whitespace-nowrap`}
-              >
-                {item?.title}
-              </p>
-            </div>
-          </div>
+          <FooterItemList key={item?.id} item={item} />
         ))}
       </div>
     </div>