5 files changed, 114 insertions, 11 deletions
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index b6d95bd8..8c82dca9 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
+import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
 import {AuthContext} from '../../routes/authentication';
 
 /**
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 206fd9e4..a3b9e74a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,19 +1,18 @@
 import React, {useState} from 'react';
-import {StyleSheet, LayoutChangeEvent} from 'react-native';
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
 import Animated from 'react-native-reanimated';
-
-import {UserType} from '../../types';
+import {defaultMoments} from '../../constants';
+import {SCREEN_HEIGHT} from '../../utils';
+import TaggsBar from '../taggs/TaggsBar';
+import Moment from './Moment';
+import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import ProfileBody from './ProfileBody';
-import TaggsBar from '../taggs/TaggsBar';
-import Feed from './Feed';
 
 interface ContentProps {
   y: Animated.Value<number>;
-  user: UserType;
 }
-const Content: React.FC<ContentProps> = ({y, user}) => {
+const Content: React.FC<ContentProps> = ({y}) => {
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const onLayout = (e: LayoutChangeEvent) => {
     const {height} = e.nativeEvent.layout;
@@ -31,7 +30,11 @@ const Content: React.FC<ContentProps> = ({y, user}) => {
       </ProfileCutout>
       <ProfileBody {...{onLayout}} />
       <TaggsBar {...{y, profileBodyHeight}} />
-      <Feed {...{user}} />
+      <View style={styles.momentsContainer}>
+        {defaultMoments.map((title, index) => (
+          <Moment key={index} title={title} images={[]} />
+        ))}
+      </View>
     </Animated.ScrollView>
   );
 };
@@ -40,6 +43,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  momentsContainer: {
+    backgroundColor: '#f2f2f2',
+    paddingBottom: SCREEN_HEIGHT / 10,
+  },
 });
 
 export default Content;
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;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index e0ca5742..2d16c830 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -1,5 +1,6 @@
 export {default as Cover} from './Cover';
 export {default as Content} from './Content';
+export {default as Moment} from './Moment';
 export {default as ProfileCutout} from './ProfileCutout';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 9a5ec1e2..341a713a 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { TAGGS_GRADIENT } from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
 
 interface TaggProps extends ViewProps {}