Merge pull request #447 from IvanIFChen/tma867-sp-badge-placement

[TMA-867] SP Badge Placement

1 files changed, 64 insertions, 0 deletions

diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
new file mode 100644
index 00000000..8f576a43
--- /dev/null
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -0,0 +1,64 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {UniversityBadge} from '../../types';
+import {normalize} from '../../utils';
+
+interface BadgeIconProps {
+  badge: UniversityBadge;
+  img: ImageSourcePropType;
+  style?: StyleProp<ViewStyle>;
+}
+
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity
+      style={[styles.badgeButton, style]}
+      onPress={() => {
+        navigation.navigate('MutualBadgeHolders', {
+          badge_id: badge.id,
+          badge_title: badge.name,
+          badge_img: img,
+        });
+      }}>
+      <LinearGradient
+        colors={['#4E3629', '#EC2027']}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.badgeBackground}>
+        <Image source={img} style={styles.icon} />
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  badgeBackground: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeButton: {
+    width: normalize(30),
+    height: normalize(30),
+    borderRadius: 30,
+  },
+  icon: {
+    width: '60%',
+    height: '60%',
+  },
+});
+
+export default BadgeIcon;