Fakultas Ilmu Komputer UI

index.tsx 1.74 KB
Newer Older
1
2
3
4
5
6
7
import React, { FC } from 'react';
import { View, Text } from 'react-native';

import { typographyStyles } from 'styles';
import { styles } from './styles';

interface Props {
8
  infos: { label: string; content: string }[];
9
  status: 'healthy' | 'warning' | 'danger' | 'catastrophe';
10
11
12
13
  testID?: string;
}

const ResultCard: FC<Props> = ({ infos, status, testID }) => {
14
15
  const getColorFromStatus = (cardStatus: string) => {
    if (cardStatus === 'healthy') {
16
17
18
      return '#1DD1A1';
    } else if (status === 'warning') {
      return '#FF9A3E';
19
    } else if (status === 'danger') {
20
      return '#F44771';
21
22
    } else {
      return '#980000';
23
24
25
26
27
28
    }
  };

  const cardColor = getColorFromStatus(status);

  const infoPairs = infos.reduce(function (result, value, index, array) {
29
30
31
    if (index % 2 === 0) {
      result.push(array.slice(index, index + 2));
    }
32
33
34
35
36
37
38
39
    return result;
  }, []);

  return (
    <View style={[styles.card, { backgroundColor: cardColor }]} testID={testID}>
      {infoPairs.map((pair, ii) => (
        <View style={styles.row} key={ii}>
          {pair.map((info, jj) => {
40
            const padding = jj % 2 === 0 ? styles.leftSide : styles.rightSide;
41
42

            return (
43
              <View style={[styles.content, padding]} key={info.label}>
44
                <Text style={[typographyStyles.overlineBig, styles.text]}>
45
                  {info.label}
46
47
48
49
50
                </Text>
                <Text
                  style={[
                    typographyStyles.headingMedium,
                    styles.text,
51
                    styles.marginTop,
52
53
54
55
56
57
58
59
60
61
62
63
64
                  ]}>
                  {info.content}
                </Text>
              </View>
            );
          })}
        </View>
      ))}
    </View>
  );
};

export default ResultCard;