1 files changed, 66 insertions, 11 deletions
diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index 838f7987..13e775f7 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {Alert, StyleSheet, Text, View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
+import {BadgeIcon} from '..';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {RootState} from '../../store/rootReducer';
-import {ScreenType} from '../../types';
+import {ScreenType, UniversityBadgeDisplayType} from '../../types';
+import {badgesToDisplayBadges, normalize} from '../../utils';
 
 interface ProfileBadgesProps {
   userXId: string | undefined;
@@ -11,19 +14,71 @@ interface ProfileBadgesProps {
 }
 
 const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
-  const {badges, university} = useSelector((state: RootState) =>
+  const {badges} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId].profile : state.user.profile,
   );
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
+  >([]);
+
+  useEffect(() => {
+    setDisplayBadges(badgesToDisplayBadges(badges));
+  }, [badges]);
+
   return (
-    <ScrollView horizontal>
-      {badges.map((badge) => (
-        <> </>
-        // <BadgeIcon key={badge.id} badge={{...badge, img: }} />
-      ))}
-    </ScrollView>
+    <>
+      {displayBadges.length === 0 && (
+        <>
+          <Text style={styles.title}>Badges</Text>
+          <Text style={styles.body}>
+            Proudly represent your team, club, or organization!
+          </Text>
+        </>
+      )}
+      {displayBadges.length === 0 ? (
+        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
+          <PlusIcon
+            width={normalize(31)}
+            height={normalize(31)}
+            color={'black'}
+            onPress={() => Alert.alert('fooo')}
+          />
+          {[0, 0, 0, 0, 0].map(() => (
+            <View style={styles.greyCircle} />
+          ))}
+        </ScrollView>
+      ) : (
+        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
+          {displayBadges.map((displayBadge) => (
+            <BadgeIcon key={displayBadge.id} badge={displayBadge} />
+          ))}
+        </ScrollView>
+      )}
+    </>
   );
 };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  title: {
+    fontWeight: '600',
+    fontSize: normalize(13.5),
+    lineHeight: normalize(18),
+  },
+  body: {
+    fontSize: normalize(13.5),
+    lineHeight: normalize(17),
+  },
+  badgeContainer: {
+    width: '100%',
+    borderWidth: 1,
+    justifyContent: 'space-between',
+  },
+  greyCircle: {
+    width: normalize(31),
+    height: normalize(31),
+    borderRadius: normalize(31) / 2,
+    backgroundColor: '#c4c4c4',
+  },
+});
 
 export default ProfileBadges;