feat: extract heading section into a prop

island-is · Oct 11, 2024 · d8a2784 · d8a2784
1 parent 5ed5723
commit d8a2784
Showing 1 changed file with 48 additions and 96 deletions.
diff --git a/apps/native/app/src/screens/health/health-overview.tsx b/apps/native/app/src/screens/health/health-overview.tsx
@@ -32,9 +32,46 @@ const Host = styled(SafeAreaView)`
 const ButtonWrapper = styled(View)`
   flex-direction: row;
   margin-top: ${({ theme }) => theme.spacing[3]}px;
+  margin-bottom: ${({ theme }) => -theme.spacing[1]}px;
   gap: ${({ theme }) => theme.spacing[2]}px;
 `
 
+interface HeadingSectionProps {
+  title: string
+  onPress: () => void
+}
+
+const HeadingSection: React.FC<HeadingSectionProps> = ({ title, onPress }) => {
+  const theme = useTheme()
+  return (
+    <TouchableOpacity onPress={onPress} style={{ marginTop: theme.spacing[2] }}>
+      <Heading
+        small
+        button={
+          <TouchableOpacity
+            onPress={onPress}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              variant="heading5"
+              color={theme.color.blue400}
+              style={{ marginRight: 4 }}
+            >
+              <FormattedMessage id="button.seeAll" />
+            </Typography>
+            <Image source={externalLinkIcon} />
+          </TouchableOpacity>
+        }
+      >
+        {title}
+      </Heading>
+    </TouchableOpacity>
+  )
+}
+
 const { getNavigationOptions, useNavigationOptions } =
   createNavigationOptionHooks((theme, intl) => ({
     topBar: {
@@ -160,44 +197,15 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
               }
             />
           </ButtonWrapper>
-          <TouchableOpacity
+          <HeadingSection
+            title={intl.formatMessage({ id: 'health.overview.healthCenter' })}
             onPress={() =>
               openBrowser(
                 `${origin}/minarsidur/heilsa/heilsugaesla`,
                 componentId,
               )
             }
-            style={{ marginTop: theme.spacing[1] }}
-          >
-            <Heading
-              small
-              button={
-                <TouchableOpacity
-                  onPress={() =>
-                    openBrowser(
-                      `${origin}/minarsidur/heilsa/heilsugaesla`,
-                      componentId,
-                    )
-                  }
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Typography
-                    variant="heading5"
-                    color={theme.color.blue400}
-                    style={{ marginRight: 4 }}
-                  >
-                    <FormattedMessage id="button.seeAll" />
-                  </Typography>
-                  <Image source={externalLinkIcon} />
-                </TouchableOpacity>
-              }
-            >
-              <FormattedMessage id="health.overview.healthCenter" />
-            </Heading>
-          </TouchableOpacity>
+          />
           <InputRow background>
             <Input
               label={intl.formatMessage({
@@ -234,41 +242,12 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
               noBorder
             />
           </InputRow>
-          <TouchableOpacity
+          <HeadingSection
+            title={intl.formatMessage({ id: 'health.overview.statusOfRights' })}
             onPress={() =>
               openBrowser(`${origin}/minarsidur/heilsa/yfirlit`, componentId)
             }
-            style={{ marginTop: theme.spacing[2] }}
-          >
-            <Heading
-              small
-              button={
-                <TouchableOpacity
-                  onPress={() =>
-                    openBrowser(
-                      `${origin}/minarsidur/heilsa/yfirlit`,
-                      componentId,
-                    )
-                  }
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Typography
-                    variant="heading5"
-                    color={theme.color.blue400}
-                    style={{ marginRight: 4 }}
-                  >
-                    <FormattedMessage id="button.seeAll" />
-                  </Typography>
-                  <Image source={externalLinkIcon} />
-                </TouchableOpacity>
-              }
-            >
-              <FormattedMessage id="health.overview.statusOfRights" />
-            </Heading>
-          </TouchableOpacity>
+          />
           {healthInsuranceRes.data?.rightsPortalInsuranceOverview?.isInsured ||
           healthInsuranceRes.loading ? (
             <InputRow background>
@@ -312,44 +291,17 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
               hasBorder
             />
           )}
-          <TouchableOpacity
+          <HeadingSection
+            title={intl.formatMessage({
+              id: 'health.overview.payments',
+            })}
             onPress={() =>
               openBrowser(
                 `${origin}/minarsidur/heilsa/greidslur/greidsluthatttaka`,
                 componentId,
               )
             }
-            style={{ marginTop: theme.spacing[2] }}
-          >
-            <Heading
-              small
-              button={
-                <TouchableOpacity
-                  onPress={() =>
-                    openBrowser(
-                      `${origin}/minarsidur/heilsa/greidslur/greidsluthatttaka`,
-                      componentId,
-                    )
-                  }
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Typography
-                    variant="heading5"
-                    color={theme.color.blue400}
-                    style={{ marginRight: 4 }}
-                  >
-                    <FormattedMessage id="button.seeAll" />
-                  </Typography>
-                  <Image source={externalLinkIcon} />
-                </TouchableOpacity>
-              }
-            >
-              <FormattedMessage id="health.overview.payments" />
-            </Heading>
-          </TouchableOpacity>
+          />
           <InputRow background>
             <Input
               label={intl.formatMessage({