aboutsummaryrefslogtreecommitdiff
path: root/src/components/moments/IndividualMomentTitleBar.tsx
blob: bd5b307f588e700852ad8ee72675f903f797b06a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from 'react';
import {TouchableOpacity} from 'react-native';
import {Text, View, StyleSheet, ViewProps} from 'react-native';
import CloseIcon from '../../assets/ionicons/close-outline.svg';

interface IndividualMomentTitleBarProps extends ViewProps {
  title: string;
  close: () => void;
}
const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
  title,
  close,
  style,
}) => {
  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity style={styles.closeButton} onPress={close}>
        <CloseIcon height={'100%'} width={'100%'} color={'white'} />
      </TouchableOpacity>
      <Text style={styles.header}>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: '5%',
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  closeButton: {
    position: 'absolute',
    height: '50%',
    aspectRatio: 1,
    left: '3%',
  },
});

export default IndividualMomentTitleBar;