416 lines
11 KiB
JavaScript
416 lines
11 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Image,
|
|
TouchableOpacity,
|
|
ImageBackground,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import {
|
|
Ionicons,
|
|
FontAwesome5,
|
|
MaterialCommunityIcons,
|
|
} from "@expo/vector-icons";
|
|
|
|
import Carousel from "react-native-reanimated-carousel";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import BottomNav from "../../Navigation/BottomNav";
|
|
|
|
const { width } = Dimensions.get("window"); // Get the screen width
|
|
|
|
const Home = () => {
|
|
// const navigate = (route) => navigation.navigate(route);
|
|
const navigation = useNavigation();
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
|
|
const sliderData = [
|
|
{ id: "1", image: require("../../assets/images/poster1.png") },
|
|
{ id: "2", image: require("../../assets/images/poster2.png") },
|
|
];
|
|
|
|
const handleNext = () => {
|
|
navigation.navigate(""); // Add the name of the screen to navigate
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ImageBackground
|
|
source={require("../../assets/images/bg.png")}
|
|
style={styles.backgroundImage}
|
|
>
|
|
<View style={styles.header}>
|
|
<Text style={styles.date}>05 Mei 2024</Text>
|
|
<Text style={styles.greeting}>
|
|
HI, PENGGUNA ECOMAP{" "}
|
|
<Ionicons name="checkmark-circle" size={18} color="green" />
|
|
</Text>
|
|
<Text style={styles.subtitle}>
|
|
KEBERSIHAN LINGKUNGAN SEKITAR ANDA WAJIB TERJAGA!
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.coinRow}>
|
|
<View style={styles.coinInfo}>
|
|
<View style={styles.coinBox}>
|
|
<Text style={styles.coinLabel}>KOIN SAYA</Text>
|
|
<View style={styles.coinValueRow}>
|
|
<Text style={styles.coinText}>0</Text>
|
|
<Image
|
|
source={require("../../assets/images/koin.png")}
|
|
style={styles.coinImage}
|
|
/>
|
|
</View>
|
|
<Text style={styles.noCoinText}>
|
|
Belum ada koin yang terkumpul
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.historyButton}
|
|
onPress={() => navigation.navigate("RiwayatCoinScreen")} // Ganti dengan nama layar yang sesuai
|
|
>
|
|
<Text style={styles.historyButtonText}>RIWAYAT KOIN</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={styles.reportButton}
|
|
onPress={() => navigation.navigate("BerandaPengaduan")}
|
|
>
|
|
<Text style={styles.reportButtonText}>BERANDA PENGADUAN</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.menuContainer}>
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("LokasiTerdekat")}
|
|
// onPress={() =>
|
|
// navigation.navigate("MainTabs", { screen: "LokasiTerdekat" })
|
|
// } // Buka MainTabs, lalu LokasiTerdekat
|
|
>
|
|
<Ionicons
|
|
name="location"
|
|
size={45}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
<Text style={styles.menuText}>LOKASI TERDEKAT</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("daftarTPS")}
|
|
>
|
|
<Ionicons
|
|
name="bookmarks"
|
|
size={45}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
|
|
<Text style={styles.menuText}>DAFTAR TPS DI NGANJUK</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("pengaduansampah")}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name="trash-can"
|
|
size={50}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
{/* <View style={styles.badge}>
|
|
<FontAwesome5
|
|
name="lock"
|
|
size={12}
|
|
color="#fff"
|
|
style={styles.lock}
|
|
/>
|
|
</View> */}
|
|
<Text style={styles.menuText}>PENGADUAN SAMPAH</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("misimingguan")}
|
|
>
|
|
<FontAwesome5
|
|
name="gift"
|
|
size={45}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
{/* <View style={styles.badge}>
|
|
<FontAwesome5
|
|
name="lock"
|
|
size={12}
|
|
color="#fff"
|
|
style={styles.lock}
|
|
/>
|
|
</View> */}
|
|
<Text style={styles.menuText}>DAPATKAN KOIN</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={{ marginTop: 20 }}>
|
|
<Carousel
|
|
loop
|
|
autoPlay={true}
|
|
autoPlayInterval={3000}
|
|
width={width} // Use screen width here
|
|
height={180}
|
|
data={sliderData}
|
|
scrollAnimationDuration={1000}
|
|
onSnapToItem={(index) => setActiveSlide(index)}
|
|
renderItem={({ item }) => (
|
|
<Image
|
|
source={item.image}
|
|
style={styles.sliderImage}
|
|
resizeMode="cover"
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
</ImageBackground>
|
|
<BottomNav />
|
|
{/* <View style={styles.bottomNav}>
|
|
<TouchableOpacity style={styles.navItem}>
|
|
<Ionicons name="home" size={30} color="#2C6B2F" />
|
|
<Text style={styles.navText}>UTAMA</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.navItem}
|
|
onPress={() => navigation.navigate("EcoMapCoinExchangeScreen")}
|
|
>
|
|
<FontAwesome5 name="exchange-alt" size={24} color="#2C6B2F" />
|
|
<Text style={styles.navText}>TUKAR KOIN</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.navItem}>
|
|
<View style={styles.notifIconContainer}>
|
|
<Ionicons name="notifications-outline" size={24} color="#2C6B2F" />
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>1</Text>
|
|
</View>
|
|
</View>
|
|
<Text style={styles.navText}>NOTIFIKASI</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.navItem}>
|
|
<Ionicons name="person-circle-outline" size={24} color="#2C6B2F" />
|
|
<Text style={styles.navText}>PROFIL</Text>
|
|
</TouchableOpacity>
|
|
</View> */}
|
|
</View>
|
|
// </View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: "#f9f9f9" },
|
|
backgroundImage: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
paddingTop: 0,
|
|
},
|
|
header: { marginTop: 10, alignItems: "flex-start", paddingBottom: 5 },
|
|
date: { fontSize: 20, color: "#000", paddingLeft: 20, marginTop: 20 },
|
|
greeting: {
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
marginTop: 0,
|
|
color: "#333",
|
|
paddingLeft: 20,
|
|
},
|
|
subtitle: {
|
|
fontSize: 15,
|
|
color: "#27AE60",
|
|
fontWeight: "600",
|
|
paddingLeft: 20,
|
|
},
|
|
coinRow: {
|
|
flexDirection: "column",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
marginTop: 20,
|
|
},
|
|
|
|
coinInfo: { alignItems: "flex-start" },
|
|
coinLabel: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
color: "#333",
|
|
marginBottom: 0,
|
|
marginLeft: -100,
|
|
},
|
|
coinBox: {
|
|
marginVertical: 10,
|
|
backgroundColor: "#fff",
|
|
paddingHorizontal: 130,
|
|
paddingVertical: 15,
|
|
borderRadius: 20,
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
elevation: 1,
|
|
borderWidth: 1,
|
|
borderColor: "#aaa",
|
|
position: "relative",
|
|
},
|
|
coinValueRow: { flexDirection: "row", alignItems: "center", marginTop: 10 },
|
|
coinText: {
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
color: "#333",
|
|
textAlign: "left",
|
|
marginLeft: -100,
|
|
},
|
|
coinImage: { width: 24, height: 24, marginLeft: 6 },
|
|
|
|
noCoinText: {
|
|
fontSize: 12,
|
|
color: "#aaa",
|
|
marginTop: 5,
|
|
textAlign: "left",
|
|
marginLeft: -100,
|
|
},
|
|
historyButton: {
|
|
position: "absolute",
|
|
backgroundColor: "#27AE60", // Sesuaikan dengan warna yang diinginkan
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 10,
|
|
borderRadius: 20,
|
|
top: -6,
|
|
right: 10,
|
|
marginTop: 15, // Spasi antara tombol dan teks
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "100%", // Lebar penuh box
|
|
elevation: 1, // Tambahkan sedikit bayangan
|
|
},
|
|
historyButtonText: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
textAlign: "center",
|
|
},
|
|
|
|
reportButton: {
|
|
backgroundColor: "#DCDCDC",
|
|
paddingVertical: 15, // Adjust padding for a more rectangular shape
|
|
paddingHorizontal: 10, // Increase horizontal padding to make it look like a rectangle
|
|
borderRadius: 20, // Keep the border radius low for a rectangular shape
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 1,
|
|
borderColor: "#999",
|
|
width: "80%", // Take up full width inside the box
|
|
marginTop: 10,
|
|
paddingLeft: 5, // Add some spacing between the content
|
|
},
|
|
reportButtonText: {
|
|
fontSize: 14,
|
|
color: "#000",
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
},
|
|
menuImage: {
|
|
width: 50,
|
|
height: 50,
|
|
marginLeft: 3,
|
|
marginBottom: 5,
|
|
marginTop: 7,
|
|
justifyContent: "center",
|
|
},
|
|
menuContainer: {
|
|
marginTop: 5,
|
|
marginRight: 5,
|
|
marginLeft: 12,
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
justifyContent: "space-around",
|
|
paddingRight: 15,
|
|
},
|
|
menuItem: {
|
|
width: "23%",
|
|
alignItems: "center",
|
|
marginVertical: 10,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: "#ddd",
|
|
borderRadius: 25,
|
|
backgroundColor: "#fff",
|
|
elevation: 2,
|
|
},
|
|
menuText: {
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
color: "#333",
|
|
marginTop: 8,
|
|
textAlign: "center",
|
|
},
|
|
sliderImage: {
|
|
height: 160,
|
|
borderRadius: 19,
|
|
width: "80%",
|
|
alignSelf: "center",
|
|
marginRight: 25,
|
|
},
|
|
bottomNav: {
|
|
position: "absolute",
|
|
bottom: -10,
|
|
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
backgroundColor: "#fff",
|
|
paddingVertical: 8,
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 6,
|
|
elevation: 5,
|
|
},
|
|
navItem: {
|
|
alignItems: "center",
|
|
padding: 6,
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 5,
|
|
marginHorizontal: 5,
|
|
},
|
|
navText: { color: "#2C6B2F", fontSize: 12, marginTop: 5 },
|
|
notifIconContainer: { position: "relative" },
|
|
badge: {
|
|
position: "absolute",
|
|
right: -5,
|
|
top: -5,
|
|
backgroundColor: "#E74C3C",
|
|
borderRadius: 10,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
},
|
|
lock: {
|
|
position: "absolute",
|
|
right: -5,
|
|
top: -5,
|
|
backgroundColor: "#2C6B2F",
|
|
borderRadius: 40,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 5,
|
|
borderWidth: 1,
|
|
},
|
|
badgeText: { color: "#fff", fontSize: 10, fontWeight: "bold" },
|
|
});
|
|
|
|
export default Home;
|