1 files changed, 95 insertions, 0 deletions
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
new file mode 100644
index 00000000..0fbabe8f
--- /dev/null
+++ b/src/components/profile/Moment.tsx
@@ -0,0 +1,95 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import {MOMENTS_TITLE_COLOR} from '../../constants';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface MomentProps {
+  title: string;
+  images: Array<string>;
+}
+
+const Moment: React.FC<MomentProps> = ({title, images}) => {
+  const navigation = useNavigation();
+  const navigateToImagePicker = () => {
+    Alert.alert('Perform navigation to Image Picker with Caption screen');
+    // navigation.navigate('')
+  };
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.titleText}>{title}</Text>
+        <PlusIcon
+          width={21}
+          height={21}
+          onPress={() => navigateToImagePicker()}
+        />
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollContainer}>
+        <TouchableOpacity onPress={() => navigateToImagePicker()}>
+          <LinearGradient
+            colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+            <View style={styles.defaultImage}>
+              <BigPlusIcon width={50} height={50} />
+              <Text style={styles.defaultImageText}>
+                Add a moment of your {title.toLowerCase()}!
+              </Text>
+            </View>
+          </LinearGradient>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#eee',
+  },
+  header: {
+    flex: 1,
+    paddingHorizontal: 10,
+    padding: 5,
+    paddingTop: 20,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  titleText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: MOMENTS_TITLE_COLOR,
+  },
+  scrollContainer: {
+    height: SCREEN_WIDTH / 2,
+    backgroundColor: '#eee',
+  },
+  defaultImage: {
+    aspectRatio: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  defaultImageText: {
+    fontSize: 20,
+    paddingTop: 20,
+    color: 'white',
+    fontWeight: 'bold',
+    width: '75%',
+    textAlign: 'center',
+  },
+});
+
+export default Moment;