Fakultas Ilmu Komputer UI

Commit f66691fc authored by Mohammad Faraz Abisha Mirza's avatar Mohammad Faraz Abisha Mirza Committed by angelin depthios
Browse files

PlainForm and IconForm Edit, DropdownForm Initialization, Spacer Props...

PlainForm and IconForm Edit, DropdownForm Initialization, Spacer Props Addition and Edit, IconForm and Spacer Tests, Package Addition
parent 4eee1812
import { FlatList, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import HorizontalCards from "../components/Cards/HorizontalCards";
import { useNavigation } from "@react-navigation/core";
import Colors from "../constants/Colors";
import { View } from "../components/Themed";
import Spacer from "../components/Spacer/Spacer";
import { IEcosystem } from "../types/firestore/ecosystems";
import IconForm from "../components/Forms/IconForm";
const CategoryEcosystemListScreen = () => {
const nav = useNavigation();
const [search, setSearch] = useState("");
const [listData, setListData] = useState([
{
id: "1",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "2",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "120",
title: "Pengolahan Kerupuk",
rate: "4.9",
},
{
id: "3",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "130",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "4",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "140",
title: "Pengolahan Kerupuk",
rate: "4.4",
},
{
id: "5",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "4",
},
{
id: "6",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "10",
title: "Pengolahan Kerupuk",
rate: "5",
},
]);
return (
<SafeAreaView style={styles.container}>
<View>
<IconForm
text={search}
setText={setSearch}
placeholder={"Cari di kategori ini"}
search
/>
</View>
<Spacer variant={"xl"} />
<FlatList
data={listData}
renderItem={({ item }) => {
return (
<View style={styles.horizontalCard}>
<HorizontalCards
image={item.image}
member={item.member}
title={item.title}
rate={item.rate}
onPress={null}
/>
</View>
);
}}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
backgroundColor: Colors.background,
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
},
});
export default CategoryEcosystemListScreen;
import { FlatList, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import HorizontalCards from "../components/Cards/HorizontalCards";
import { useNavigation } from "@react-navigation/core";
import Colors from "../constants/Colors";
import { View } from "../components/Themed";
import Spacer from "../components/Spacer/Spacer";
import { IEcosystem } from "../types/firestore/ecosystems";
import { IEcosystemList } from "../types/ecosystemList";
const EcosystemListScreen = () => {
const nav = useNavigation();
const [listData, setListData] = useState([
{
id: "1",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "2",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "120",
title: "Pengolahan Kerupuk",
rate: "4.9",
},
{
id: "3",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "130",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "4",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "140",
title: "Pengolahan Kerupuk",
rate: "4.4",
},
{
id: "5",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "4",
},
{
id: "6",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "10",
title: "Pengolahan Kerupuk",
rate: "5",
},
]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={listData}
renderItem={({ item }) => {
return (
<View style={styles.horizontalCard}>
<HorizontalCards
image={item.image}
member={item.member}
title={item.title}
rate={item.rate}
onPress={null}
/>
</View>
);
}}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
backgroundColor: Colors.background,
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
},
});
export default EcosystemListScreen;
......@@ -108,7 +108,7 @@ const RegisterGoogleFacebookScreen = ({
</Text>
</View>
<Spacer variant={"l"} />
<View style={styles.button}>
<View style={styles.componentWrapper}>
<MainButton text="Daftar" colors="primary" onPress={() => {}} />
</View>
<Spacer variant={"xl"} />
......
export type IEcosystemList = {
variant: "terbaru" | "bergabung" | "populer";
};
export type IEcosystem = {
item: {
id?: string;
image: string;
member: string;
title: string;
rate: string;
};
};
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