super-app: create NavBarContainer

This makes it easier to reuse the NavBar + Container combo, especially
for the personal calls app (which has a lot more routes than the super
app).

apps/super-app/src/components/NavBarContainer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box} from '@mui/material';
+import { NavBar } from './navbar';
+import { Container } from '../common/components';
+import './navbar/NavBarAbove.css';
+
+interface NavBarContainerProps {
+  children: React.ReactNode;
+  containerStyle?: React.CSSProperties;
+  aboveStyle?: React.CSSProperties;
+}
+
+export function NavBarContainer<T extends NavBarContainerProps>(props: T) {
+  const {
+    children,
+    aboveStyle,
+    containerStyle,
+    ...rest
+  } = props
+
+
+  return <Container {...rest} style={containerStyle}>
+    <Box
+      className="navbar-above"
+      style={aboveStyle}
+    >
+      {children}
+    </Box>
+    <NavBar />
+  </Container>;
+}

apps/super-app/src/components/index.ts

@@ -1 +1,2 @@
 export { NavBar } from './navbar';
+export { NavBarContainer } from './NavBarContainer';

apps/super-app/src/routes/LandingPage.tsx

@@ -1,17 +1,15 @@
 import './LandingPage.css';
 import { useEffect, useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import { Container } from '../common/components';
+import { Typography } from '@mui/material';
 import { ServiceCard } from '../common/components/ServiceCard';
+import { NavBarContainer } from '../components';
 import {
   useLanguage,
   getServiceCardDetails,
   getSupportDetailStrings,
   ServiceCardDetail,
   SupportDetailStrings,
 } from '../services';
-import { NavBar } from '../components';
-import '../components/navbar/NavBarAbove.css';
 
 export function LandingPage() {
   const [fixedStrings, setFixedStrings] = useState<SupportDetailStrings | null>(
@@ -28,19 +26,16 @@ export function LandingPage() {
   const { headerTitle } = fixedStrings;
   const serviceCardDetails: ServiceCardDetail[] = getServiceCardDetails();
   return (
-    <Container
-      style={{
+    <NavBarContainer
+      containerStyle={{
         background: 'no-repeat url(/images/background.svg) bottom center',
         backgroundSize: 'contain',
         padding: 0,
       }}
+      aboveStyle={{
+        padding: '0 16px',
+      }}
     >
-      <Box
-        className="navbar-above"
-        style={{
-          padding: '0 16px',
-        }}
-      >
         <Typography
           variant="h4"
           sx={{
@@ -57,8 +52,6 @@ export function LandingPage() {
             route={route}
           ></ServiceCard>
         ))}
-      </Box>
-      <NavBar />
-    </Container>
+    </NavBarContainer>
   );
 }