Apply SectionHeader logic for indicators group

kausaltech · Nov 26, 2024 · 9ba1b2a · 9ba1b2a
1 parent 482a614
commit 9ba1b2a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/components/contentblocks/ActionListBlock.tsx b/components/contentblocks/ActionListBlock.tsx
@@ -35,7 +35,7 @@ const ActionListSection = styled.div`
   padding: ${(props) => props.theme.spaces.s400} 0;
 `;
 
-const SectionHeader = styled.h2`
+export const SectionHeader = styled.h2`
   text-align: center;
   padding: ${(props) => props.theme.spaces.s100};
   border-radius: ${(props) => props.theme.cardBorderRadius};

diff --git a/components/contentblocks/IndicatorGroupBlock.tsx b/components/contentblocks/IndicatorGroupBlock.tsx
@@ -10,6 +10,7 @@ import IndicatorHighlightCard from 'components/indicators/IndicatorHighlightCard
 import IndicatorVisualisation from 'components/indicators/IndicatorVisualisation';
 import Button from 'components/common/Button';
 import { useTranslations } from 'next-intl';
+import { SectionHeader } from 'components/contentblocks/ActionListBlock';
 
 const IndicatorGraphSection = styled.div`
   background-color: ${(props) => props.theme.neutralLight};
@@ -92,10 +93,14 @@ type Props = {
 const IndicatorGroupBlock = ({ id = '', title, indicators }: Props) => {
   const t = useTranslations();
 
+  const displayHeader = title && title !== '-' ? title : t('indicators');
+
   return (
     <IndicatorGraphSection id={id}>
       <Container>
-        <h2>{title ?? t('indicators')}</h2>
+        {displayHeader && displayHeader !== '-' ? (
+          <SectionHeader>{displayHeader}</SectionHeader>
+        ) : null}
         <Row className="justify-content-center">
           {indicators.map((item) => (
             <IndicatorItem