aboutsummaryrefslogtreecommitdiff
path: root/src/components/taggs/SocialMediaInfo.tsx
blob: 5497226c5e6626b739d7434a00cb33fce16bb183 (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
72
73
74
75
76
77
78
79
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {ScreenType} from '../../types';
import {SocialIcon} from '../common';
import {handleOpenSocialUrlOnBrowser} from '../../utils';

interface SocialMediaInfoProps {
  fullname: string;
  type: string;
  handle?: string;
}

const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
  fullname,
  type,
  handle,
}) => {
  return (
    <View style={styles.container}>
      {handle && type !== 'Facebook' ? (
        <Text
          style={styles.handle}
          onPress={() => {
            handleOpenSocialUrlOnBrowser(handle, type);
          }}>
          {' '}
          @{handle}{' '}
        </Text>
      ) : (
        <></>
      )}
      <View style={styles.row}>
        <View />
        <SocialIcon
          style={styles.icon}
          social={type}
          screenType={ScreenType.Profile}
        />
        <Text
          style={styles.name}
          onPress={() => {
            handleOpenSocialUrlOnBrowser(handle, type);
          }}>
          {fullname}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingBottom: 40,
  },
  handle: {
    color: 'white',
    fontSize: 12,
  },
  name: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
    paddingLeft: 5,
  },
  icon: {
    width: 20,
    height: 20,
    borderRadius: 20,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 10,
  },
});

export default SocialMediaInfo;