[TMA-406&201] User Handle UI for Individual Moments (#129)

* initial work

* made big progress towards flatlist moment view

* UI done, just need to pass in data now

* minor fixes to get things actually running correctly

* vertical scroll working

* initial index working

* moment drawer text color to red

* moved report to drawer

* removed garbage

* added ?

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
new file mode 100644
index 00000000..bd5b307f
--- /dev/null
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -0,0 +1,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;