1import * as React from 'react';
2import { StyleSheet, Text as RNText } from 'react-native';
3
4import Colors from '../../../constants/Colors';
5
6type DevelopmentServerSubtitleProps = {
7  title?: string;
8  subtitle?: string;
9  onPressSubtitle?: () => any;
10  image?: number | string | null;
11};
12
13export function DevelopmentServerSubtitle({
14  title,
15  subtitle,
16  image,
17  onPressSubtitle,
18}: DevelopmentServerSubtitleProps) {
19  const isCentered = !title && !image;
20
21  return subtitle ? (
22    <RNText
23      style={[
24        styles.subtitleText,
25        !title ? styles.subtitleMarginBottom : undefined,
26        isCentered ? styles.subtitleCentered : undefined,
27      ]}
28      onPress={onPressSubtitle}
29      ellipsizeMode="tail"
30      numberOfLines={title ? 1 : 2}>
31      {subtitle}
32    </RNText>
33  ) : null;
34}
35
36const styles = StyleSheet.create({
37  subtitleText: {
38    color: Colors.light.greyText,
39    fontSize: 13,
40  },
41  subtitleMarginBottom: {
42    marginBottom: 2,
43  },
44  subtitleCentered: {
45    textAlign: 'center',
46    marginEnd: 10,
47  },
48});
49