Merge pull request #187 from shravyaramesh/tma538-friend-requests

[TMA485] friend request frontend

1 files changed, 78 insertions, 0 deletions

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
new file mode 100644
index 00000000..221056c0
--- /dev/null
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+interface AcceptDeclineButtonsProps {
+  requester: ProfilePreviewType;
+  onAccept: () => void;
+  onReject: () => void;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
+  requester,
+  onAccept,
+  onReject,
+  externalStyles,
+}) => {
+  return (
+    <View style={[styles.container, externalStyles?.container]}>
+      <TouchableOpacity
+        style={[styles.genericButtonStyle, styles.acceptButton]}
+        onPress={onAccept}>
+        <Text style={[styles.buttonTitle, styles.acceptButtonTitleColor]}>
+          Accept
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.genericButtonStyle, styles.rejectButton]}
+        onPress={onReject}>
+        <Text style={[styles.buttonTitle, styles.rejectButtonTitleColor]}>
+          Reject
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  genericButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.14,
+    height: SCREEN_WIDTH * 0.06,
+    borderRadius: 5,
+    padding: 0,
+    marginTop: 8,
+    marginRight: '3%',
+  },
+  acceptButton: {
+    padding: 0,
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  rejectButton: {
+    borderWidth: 1,
+    backgroundColor: 'white',
+    borderColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  acceptButtonTitleColor: {
+    color: 'white',
+  },
+  rejectButtonTitleColor: {
+    color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  buttonTitle: {
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '800',
+  },
+});
+
+export default AcceptDeclineButtons;