2 files changed, 94 insertions, 0 deletions
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
new file mode 100644
index 00000000..5c58f903
--- /dev/null
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {BottomDrawer} from '.';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+// conforms the JSX onPress attribute type
+type OnPressHandler = (event: GestureResponderEvent) => void;
+
+interface GenericMoreInfoDrawerProps extends ViewProps {
+  isOpen: boolean;
+  setIsOpen: (visible: boolean) => void;
+  showIcons: boolean;
+  // An array of title, onPressHandler, and icon component
+  buttons: [string, OnPressHandler, JSX.Element?][];
+}
+
+const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
+  const {buttons, showIcons} = props;
+  // each button is 80px high, cancel button is always there
+  const initialSnapPosition =
+    (buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
+  let panelButtonStyle: ViewStyle[] = [
+    {
+      height: 80,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    showIcons ? {} : {justifyContent: 'center'},
+  ];
+  return (
+    <BottomDrawer
+      {...props}
+      showHeader={false}
+      initialSnapPosition={initialSnapPosition}>
+      <View style={styles.panel}>
+        {buttons.map(([title, action, icon], index) => (
+          <View key={index}>
+            <TouchableOpacity style={panelButtonStyle} onPress={action}>
+              {showIcons && <View style={styles.icon}>{icon}</View>}
+              <Text style={styles.panelButtonTitle}>{title}</Text>
+            </TouchableOpacity>
+            <View style={styles.divider} />
+          </View>
+        ))}
+        <TouchableOpacity
+          style={panelButtonStyle}
+          onPress={() => props.setIsOpen(false)}>
+          {/* a dummy icon for aligning the cancel button */}
+          {showIcons && <View style={styles.icon} />}
+          <Text style={styles.panelButtonTitleCancel}>Cancel</Text>
+        </TouchableOpacity>
+      </View>
+    </BottomDrawer>
+  );
+};
+
+const styles = StyleSheet.create({
+  panel: {
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  panelButtonTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  icon: {
+    height: 25,
+    width: 25,
+    marginLeft: SCREEN_WIDTH * 0.3,
+    marginRight: 25,
+  },
+  panelButtonTitleCancel: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
+});
+
+export default GenericMoreInfoDrawer;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f6521497..661d2f52 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -16,3 +16,4 @@ export {default as PostCarousel} from './PostCarousel';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as BottomDrawer} from './BottomDrawer';
 export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
+export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';