mirror of https://gitlab.com/m3f_usm/SmartStopAPK
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
|
import {View, Text, StyleSheet, StyleProp, ViewStyle} from 'react-native';
|
||
|
|
import Container from './Container';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
title?: string;
|
||
|
|
subTitle?: string;
|
||
|
|
style?: StyleProp<ViewStyle>;
|
||
|
|
}
|
||
|
|
const Header = ({title, subTitle, style}: HeaderProps) => {
|
||
|
|
return (
|
||
|
|
<Container style={style}>
|
||
|
|
<View style={styles.contentContainer}>
|
||
|
|
<View style={styles.iconContainer}>
|
||
|
|
<Icon name="bus" size={70} color={'white'} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.titleContainer}>
|
||
|
|
<Text style={styles.title}>{title}</Text>
|
||
|
|
{subTitle && <Text style={styles.subTitle}>{subTitle}</Text>}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
title: 'Sin información',
|
||
|
|
subTitle: 'Sin información',
|
||
|
|
};
|
||
|
|
|
||
|
|
Header.defaultProps = defaultProps;
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: 'orange',
|
||
|
|
},
|
||
|
|
contentContainer: {
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'stretch',
|
||
|
|
},
|
||
|
|
iconContainer: {
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignContent: 'center',
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
titleContainer: {
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'column',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginRight: 16,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 24,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
subTitle: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default Header;
|