Fakultas Ilmu Komputer UI

Commit 97d1a5cc authored by Muhammad Zahran Agung Dewantoro's avatar Muhammad Zahran Agung Dewantoro Committed by angelin depthios
Browse files

feat: create Ecosystem Detail Screen

parent 390be7dc
import { useNavigation } from "@react-navigation/core";
import * as React from "react";
import { StyleSheet } from "react-native";
import { StyleSheet, Image } from "react-native";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import SmallButton from "../../components/button/SmallButton";
import Spacer from "../../components/Spacer/Spacer";
import { MaterialIcons } from "@expo/vector-icons";
import Layout from "../../constants/Layout";
const EcosystemDetailScreen = () => {
const nav = useNavigation();
return (
<View style={styles.container}>
<View>
<Text>Layar Detail Ekosistem</Text>
<View style={styles.imageWrapper}>
<Image
style={styles.image}
source={{
// uri: {image}
uri: "https://bsmedia.business-standard.com/_media/bs/img/article/2020-12/11/full/1607656152-0479.jpg",
}}
/>
</View>
<Spacer variant={"l"} />
<View style={styles.textWrapper}>
{/* <Text style={styles.title}>{Title}</Text> */}
<Text style={styles.title}>Petani Beras dan Gandum Jawa Tengah</Text>
<Spacer variant={"l"} />
<SmallButton
text={"Lihat Peta Ekosistem"}
colors={"primary"}
onPress={() => {}}
/>
<Spacer variant={"l"} />
<View style={styles.iconWrapper}>
<View style={styles.bodyWrapper}>
<MaterialIcons name={"group"} style={styles.iconMember} size={30} />
<View style={styles.textWrapper}>
{/* <Text style={styles.iconText}>{member} Anggota</Text> */}
<Text style={styles.iconText}>350 Anggota</Text>
</View>
</View>
<View style={styles.bodyWrapper}>
<MaterialIcons name={"star"} style={styles.iconStar} size={30} />
<View style={styles.textWrapper}>
{/* <Text style={styles.iconText}>{rate}</Text> */}
<Text style={styles.iconText}>4.7</Text>
</View>
</View>
</View>
<Spacer variant={"s"} />
<Text style={styles.textBody}>
{/* {content} */}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip.
</Text>
<Spacer variant={"xl"} />
<SmallButton
text={"Keluar dari Ekosistem"}
colors={"warning"}
onPress={() => {}}
/>
</View>
</View>
);
......@@ -19,9 +71,48 @@ const EcosystemDetailScreen = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: Colors.background,
paddingHorizontal: 24,
justifyContent: "center",
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,
},
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment