initial work

1 files changed, 80 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;