added UI for university selection

1 files changed, 93 insertions, 0 deletions

diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx
new file mode 100644
index 00000000..37a95790
--- /dev/null
+++ b/src/components/onboarding/UniversitySelection.tsx
@@ -0,0 +1,93 @@
+import React, {useState} from 'react';
+import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+interface UniversitySelectionProps {
+  selected: string;
+  setSelected: (selected: string) => void;
+}
+
+const UniversitySelection: React.FC<UniversitySelectionProps> = ({selected, setSelected}) => {
+  const crestData = [
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Brown',
+      key: 'Brown University',
+    },
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Cornell',
+      key: 'Cornell University',
+    },
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Harvard',
+      key: 'Harvard University',
+    },
+  ];
+  const renderButton = (
+    imagePath: ImageSourcePropType,
+    title: string,
+    key: string,
+  ) => (
+    <TouchableOpacity
+      style={
+        selected === key ? styles.crestContainerSelected : styles.crestContainer
+      }
+      onPress={() => setSelected(key)}>
+      <Image source={imagePath} style={styles.crest} />
+      <Text style={styles.crestLabel}>{title}</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <>
+      <Text style={styles.title}>University Badge</Text>
+      <View style={styles.container}>
+        {crestData.map((data) =>
+          renderButton(data.imagePath, data.title, data.key),
+        )}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+  },
+  crest: {
+    height: normalize(25),
+    aspectRatio: 31 / 38,
+    marginBottom: 5,
+  },
+  crestContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  crestContainerSelected: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    padding: 8,
+    backgroundColor: '#fff2',
+  },
+  crestLabel: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '500',
+  },
+});
+
+export default UniversitySelection;