Fakultas Ilmu Komputer UI

EcosystemDetailScreen.tsx 3.14 KB
Newer Older
1
import * as React from "react";
2
import { StyleSheet, Image } from "react-native";
3
4
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
5
6
7
8
import SmallButton from "../../components/button/SmallButton";
import Spacer from "../../components/Spacer/Spacer";
import { MaterialIcons } from "@expo/vector-icons";
import Layout from "../../constants/Layout";
9
import { EcosystemStackScreenProps } from "../../types/navigation";
10
import { useNavigation } from "@react-navigation/core";
11

12
13
14
15
const EcosystemDetailScreen = ({
  route,
}: EcosystemStackScreenProps<"EcosystemDetails">) => {
  const { title, desc, image, member, rating } = route.params;
16
  const nav = useNavigation();
17
18
  return (
    <View style={styles.container}>
19
20
21
22
      <View style={styles.imageWrapper}>
        <Image
          style={styles.image}
          source={{
23
            uri: image,
24
25
26
27
28
29
          }}
        />
      </View>
      <Spacer variant={"l"} />
      <View style={styles.textWrapper}>
        {/* <Text style={styles.title}>{Title}</Text> */}
30
        <Text style={styles.title}>{title}</Text>
31
32
33
34
        <Spacer variant={"l"} />
        <SmallButton
          text={"Lihat Peta Ekosistem"}
          colors={"primary"}
35
36
37
          onPress={() => {
            nav.navigate("Ecosystem", { screen: "EcosystemMap" });
          }}
38
39
40
41
42
43
        />
        <Spacer variant={"l"} />
        <View style={styles.iconWrapper}>
          <View style={styles.bodyWrapper}>
            <MaterialIcons name={"group"} style={styles.iconMember} size={30} />
            <View style={styles.textWrapper}>
44
              <Text style={styles.iconText}>{member} Anggota</Text>
45
46
47
48
49
50
51
            </View>
          </View>
          <View style={styles.bodyWrapper}>
            <MaterialIcons name={"star"} style={styles.iconStar} size={30} />

            <View style={styles.textWrapper}>
              {/* <Text style={styles.iconText}>{rate}</Text> */}
52
              <Text style={styles.iconText}>{rating}</Text>
53
54
55
56
            </View>
          </View>
        </View>
        <Spacer variant={"s"} />
57
        <Text style={styles.textBody}>{desc}</Text>
58
59
60
61
62
63
        <Spacer variant={"xl"} />
        <SmallButton
          text={"Keluar dari Ekosistem"}
          colors={"warning"}
          onPress={() => {}}
        />
64
65
66
67
68
69
70
71
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
72
73
    justifyContent: "flex-start",
    alignItems: "center",
74
    backgroundColor: Colors.background,
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
    display: "flex",
  },
  image: {
    width: "100%",
    height: Layout.window.height * 0.2,
  },
  title: {
    color: Colors.text.title,
    fontSize: 24,
  },
  textBody: {
    color: Colors.text.body,
    fontSize: 16,
  },
  iconMember: {
    color: Colors.icon.tab.inactive,
  },
  iconStar: {
    color: Colors.icon.star,
  },
  iconText: {
    fontSize: 16,
    color: Colors.text.subtitle,
    paddingLeft: 8,
  },
  imageWrapper: {
    width: "100%",
  },
  iconWrapper: {
    width: "100%",
    flexDirection: "row",
  },
  bodyWrapper: {
    flex: 1,
    flexDirection: "row",
  },
  textWrapper: {
    marginTop: 4,
    width: Layout.window.width * 0.9,
114
115
116
117
  },
});

export default EcosystemDetailScreen;