Fix conditional header components

CodeForAfrica · Nov 29, 2024 · f387125 · f387125
1 parent 8821285
commit f387125
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
@@ -36,17 +36,19 @@ function CategoryHeader({ title, description, icon, ...props }) {
         )}
         {title}
       </Typography>
-      <Typography
-        variant="body2"
-        sx={({ typography }) => ({
-          paddingBottom: typography.pxToRem(20),
-          "& p": {
-            margin: 0,
-          },
-        })}
-      >
-        {description}
-      </Typography>
+      {description && (
+        <Typography
+          variant="body2"
+          sx={({ typography }) => ({
+            paddingBottom: typography.pxToRem(20),
+            "& p": {
+              margin: 0,
+            },
+          })}
+        >
+          {description}
+        </Typography>
+      )}
     </div>
   );
 }

diff --git a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js
@@ -32,17 +32,19 @@ function SubcategoryHeader({ title, description, ...props }) {
       >
         {title}
       </Typography>
-      <Typography
-        variant="body2"
-        sx={({ typography }) => ({
-          paddingBottom: typography.pxToRem(20),
-          "& p": {
-            margin: 0,
-          },
-        })}
-      >
-        {description}
-      </Typography>
+      {description && (
+        <Typography
+          variant="body2"
+          sx={({ typography }) => ({
+            paddingBottom: typography.pxToRem(20),
+            "& p": {
+              margin: 0,
+            },
+          })}
+        >
+          {description}
+        </Typography>
+      )}
     </Box>
   );
 }