aboutsummaryrefslogtreecommitdiff
path: root/src/components/profile/UniversityIcon.tsx
blob: cfe1366da3fa894074a65a3d5ac0226185cf82c9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React from 'react';
import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
import {Image, Text, View} from 'react-native-animatable';
import {getUniversityBadge, getUniversityClass, normalize} from '../../utils';
import {UniversityType} from '../../types';

export interface UniversityIconProps extends ViewProps {
  university: UniversityType;
  university_class?: number;
  imageStyle?: StyleProp<ImageStyle>;
  needsShadow?: boolean;
}

/**
 * Component to display university icon and class
 */
const UniversityIcon: React.FC<UniversityIconProps> = ({
  style,
  university,
  university_class,
  imageStyle,
  needsShadow = false,
}) => {
  return (
    <View style={[styles.container, style]}>
      <View style={needsShadow && styles.shadowStyle}>
        <Image
          source={getUniversityBadge(university, 'Crest')}
          style={[styles.icon, imageStyle]}
        />
      </View>
      {university_class && (
        <Text style={styles.univClass}>
          {getUniversityClass(university_class)}
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  univClass: {
    fontSize: normalize(14),
    fontWeight: '500',
  },
  icon: {
    width: normalize(12),
    height: normalize(13),
  },
  shadowStyle: {
    padding: 5,
    borderRadius: 30,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowOpacity: 1,
    shadowRadius: 3,
    shadowColor: 'rgba(0, 0, 0, 0.3)',
    backgroundColor: 'white',
  },
});

export default UniversityIcon;