1 files changed, 25 insertions, 7 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 940b519c..fb6186c8 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -5,18 +5,21 @@ 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 DeleteIcon from '../../assets/icons/delete-logo.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
-import {MomentType, ScreenType} from 'src/types';
+import {MomentCategoryType, MomentType, ScreenType} from 'src/types';
 
 interface MomentProps {
-  title: string;
+  title: MomentCategoryType;
   images: MomentType[] | undefined;
   userXId: string | undefined;
   screenType: ScreenType;
+  handleMomentCategoryDelete: (_: MomentCategoryType) => void;
+  shouldAllowDeletion: boolean;
 }
 
 const Moment: React.FC<MomentProps> = ({
@@ -24,6 +27,8 @@ const Moment: React.FC<MomentProps> = ({
   images,
   userXId,
   screenType,
+  handleMomentCategoryDelete,
+  shouldAllowDeletion,
 }) => {
   const navigation = useNavigation();
 
@@ -53,11 +58,21 @@ const Moment: React.FC<MomentProps> = ({
       <View style={styles.header}>
         <Text style={styles.titleText}>{title}</Text>
         {!userXId ? (
-          <PlusIcon
-            width={21}
-            height={21}
-            onPress={() => navigateToImagePicker()}
-          />
+          <>
+            <PlusIcon
+              width={21}
+              height={21}
+              onPress={() => navigateToImagePicker()}
+              style={{marginRight: 10}}
+            />
+            {shouldAllowDeletion && (
+              <DeleteIcon
+                onPress={() => handleMomentCategoryDelete(title)}
+                width={19}
+                height={19}
+              />
+            )}
+          </>
         ) : (
           <React.Fragment />
         )}
@@ -113,6 +128,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
     color: TAGG_TEXT_LIGHT_BLUE,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
   },
   scrollContainer: {
     height: SCREEN_WIDTH / 3.25,