From dedba1763b5e63f01a51fdfaa0a9b0ff7326447d Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:28:01 +0300
Subject: [PATCH] add title and value customization options

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/LocationHighlight/LocationHighlight.js    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
index be1908efa..85e215524 100644
--- 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>
   );
 });