2 files changed, 81 insertions, 0 deletions
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
new file mode 100644
index 00000000..41e0b891
--- /dev/null
+++ b/src/components/common/TaggSquareButton.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {normalize} from '../../utils';
+
+interface TaggSquareButtonProps extends ViewProps {
+  onPress: (event: GestureResponderEvent) => void;
+  title: string;
+  mode: 'normal' | 'large';
+  color: 'purple' | 'white';
+  style?: ViewStyle;
+}
+
+const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
+  const color = (() => {
+    switch (props.color) {
+      case 'purple':
+        return '#8F01FF';
+      case 'white':
+      default:
+        return 'white';
+    }
+  })();
+  switch (props.mode) {
+    case 'large':
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          <Text style={styles.normalLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+    case 'normal':
+    default:
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          <Text style={styles.normalLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  largeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    // marginBottom: '15%',
+  },
+  largeLabel: {
+    fontSize: normalize(30),
+    fontWeight: '500',
+    color: '#ddd',
+  },
+  normalButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    // marginBottom: '15%',
+  },
+  normalLabel: {
+    fontSize: normalize(24),
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+
+export default TaggSquareButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 61c7fa26..a5718c1e 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -20,3 +20,4 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
+export {default as TaggSquareButton} from './TaggSquareButton';