feat: mobile app package (#1075)

packages/mobile/src/Components/SectionHeader.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import styled from 'styled-components/native'
+
+type Props = {
+  title?: string
+  subtitle?: string
+  buttonText?: string
+  buttonAction?: () => void
+  buttonStyles?: any
+  tinted?: boolean
+  backgroundColor?: string
+}
+
+const Container = styled.View<Pick<Props, 'backgroundColor'>>`
+  /* flex: 1; */
+  /* flex-grow: 0; */
+  justify-content: space-between;
+  flex-direction: row;
+  padding-right: ${props => props.theme.paddingLeft}px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  background-color: ${props => props.backgroundColor ?? props.theme.stylekitBackgroundColor};
+`
+const TitleContainer = styled.View``
+const Title = styled.Text<Pick<Props, 'tinted'>>`
+  background-color: ${props => props.theme.stylekitBackgroundColor};
+  font-size: ${props => {
+    return Platform.OS === 'android' ? props.theme.mainTextFontSize - 2 : props.theme.mainTextFontSize - 4
+  }}px;
+  padding-left: ${props => props.theme.paddingLeft}px;
+  color: ${props => {
+    if (props.tinted) {
+      return props.theme.stylekitInfoColor
+    }
+
+    return Platform.OS === 'android' ? props.theme.stylekitInfoColor : props.theme.stylekitNeutralColor
+  }};
+  font-weight: ${Platform.OS === 'android' ? 'bold' : 'normal'};
+`
+const SubTitle = styled.Text`
+  background-color: ${props => props.theme.stylekitBackgroundColor};
+  font-size: ${props => props.theme.mainTextFontSize - 5}px;
+  margin-top: 4px;
+  padding-left: ${props => props.theme.paddingLeft}px;
+  color: ${props => props.theme.stylekitNeutralColor};
+`
+const ButtonContainer = styled.TouchableOpacity`
+  flex: 1;
+  align-items: flex-end;
+  justify-content: center;
+`
+const Button = styled.Text`
+  color: ${props => props.theme.stylekitInfoColor};
+`
+
+export const SectionHeader: React.FC<Props> = props => (
+  <Container>
+    <TitleContainer>
+      {!!props.title && (
+        <Title>
+          {Platform.select({
+            ios: props.title.toUpperCase(),
+            android: props.title,
+          })}
+        </Title>
+      )}
+      {!!props.subtitle && <SubTitle>{props.subtitle}</SubTitle>}
+    </TitleContainer>
+    {!!props.buttonText && (
+      <ButtonContainer onPress={props.buttonAction}>
+        <Button style={props.buttonStyles}>{props.buttonText}</Button>
+      </ButtonContainer>
+    )}
+  </Container>
+)