Fakultas Ilmu Komputer UI

PlainButton.tsx 2.05 KB
Newer Older
1
2
3
4
5
6
7
import { MaterialIcons } from "@expo/vector-icons";
import React from "react";
import { Text, StyleSheet, TouchableOpacity, View } from "react-native";
import Colors from "../../constants/Colors";
type props = {
  text: string;
  onPress: () => void;
8
9
  desc?: boolean;
  descText?: string;
10
};
11
const PlainButton = ({ text, desc, onPress, descText }: props) => {
12
13
14
15
16
  return (
    <View>
      <TouchableOpacity style={styles.button} onPress={() => onPress()}>
        <View style={styles.textContainter}>
          <Text style={styles.texts}>{text}</Text>
17
18
19
20
21
22
23
24
25
26
27
28
29
30
          {desc && (
            <View style={styles.desc}>
              <View style={{ marginRight: 3 }}>
                <MaterialIcons
                  name="group"
                  size={15}
                  color={Colors.icon.inactive}
                />
              </View>
              <View style={{ flex: 1, paddingRight: 7 }}>
                <Text style={styles.descText}>{descText}</Text>
              </View>
            </View>
          )}
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
        </View>
        <View style={styles.iconContainer}>
          <MaterialIcons
            style={{
              justifyContent: "center",
            }}
            name="keyboard-arrow-right"
            size={24}
            color="#666666"
          />
        </View>
      </TouchableOpacity>
    </View>
  );
};
export default PlainButton;

const styles = StyleSheet.create({
  button: {
50
    width: "100%",
51
52
53
54
55
56
57
58
59
    borderRadius: 8,
    elevation: 4,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: Colors.background,
  },
  textContainter: {
    flex: 1,
60
61
62
    paddingRight: 25,
    paddingLeft: 8,
    paddingVertical: 8,
63
64
  },
  iconContainer: {
65
66
    paddingRight: 16,
    paddingVertical: 23,
67
68
69
70
71
72
73
  },
  texts: {
    fontWeight: "300",
    width: 307,
    fontSize: 16,
    textAlign: "left",
    textAlignVertical: "center",
74
75
76
77
78
79
80
81
82
83
    color: Colors.text.body,
  },
  desc: {
    paddingTop: 5,
    flexDirection: "row",
    alignItems: "center",
  },
  descText: {
    fontSize: 12,
    color: Colors.text.disabled,
84
85
  },
});