Fakultas Ilmu Komputer UI

Commit e9df3797 authored by angelin depthios's avatar angelin depthios
Browse files

Merge branch 'ecosystem-detail-screen' into 'master'

feat: create Ecosystem Detail Screen

See merge request !63
parents 0e710b7f 97d1a5cc
Pipeline #85932 passed with stage
in 8 minutes and 8 seconds
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,
},
});
......
Markdown is supported
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