add title and value customization options

Signed-off-by: Kipruto <[email protected]>
CodeForAfrica · Jul 16, 2024 · dedba17 · dedba17
1 parent f0c281b
commit dedba17
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
@@ -2,7 +2,14 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 
 const LocationHighlight = React.forwardRef(function LocationHighlight(
-  { title, value, isLoading, ...props },
+  {
+    title,
+    value,
+    isLoading,
+    TitleTypographyProps,
+    ValueTypographyProps,
+    ...props
+  },
   ref,
 ) {
   return (
@@ -16,16 +23,20 @@ const LocationHighlight = React.forwardRef(function LocationHighlight(
     >
       <Typography
         variant="subtitle1"
+        {...TitleTypographyProps}
         sx={(theme) => ({
           fontSize: theme.typography.pxToRem(10),
           fontWeight: 300,
           lineHeight: 24 / 10,
           textTransform: "uppercase",
+          ...TitleTypographyProps?.sx,
         })}
       >
         {title}
       </Typography>
-      <Typography variant="body2">{isLoading ? "…" : value}</Typography>
+      <Typography variant="body2" {...ValueTypographyProps}>
+        {isLoading ? "…" : value}
+      </Typography>
     </Box>
   );
 });