93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
|
|
import { Ionicons, FontAwesome5 } from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
const BottomTabAdmin = () => {
|
|
const navigation = useNavigation();
|
|
|
|
return (
|
|
<View style={styles.bottomNav}>
|
|
<TouchableOpacity
|
|
style={styles.navItem}
|
|
onPress={() => navigation.navigate("AdminScreen")}
|
|
>
|
|
<Ionicons name="home" size={30} color="#2C6B2F" />
|
|
<Text style={styles.navText}>UTAMA</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.navItem}
|
|
onPress={() => navigation.navigate("TukarKoin")}
|
|
>
|
|
<FontAwesome5 name="exchange-alt" size={24} color="#2C6B2F" />
|
|
<Text style={styles.navText}>TUKAR KOIN</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.navItem}
|
|
onPress={() => navigation.navigate("NotifikasiAdminScreen")}
|
|
>
|
|
<View style={styles.notifIconContainer}>
|
|
<Ionicons name="notifications-outline" size={24} color="#2C6B2F" />
|
|
{/* Ensure the badge text is wrapped in Text component */}
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>1</Text>
|
|
</View>
|
|
</View>
|
|
<Text style={styles.navText}>NOTIFIKASI</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.navItem}
|
|
onPress={() => navigation.navigate("ProfilAdminScreen")}
|
|
>
|
|
<Ionicons name="person-circle-outline" size={24} color="#2C6B2F" />
|
|
<Text style={styles.navText}>PROFIL</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
bottomNav: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
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: {
|
|
flex: 1, // Membuat tiap tombol punya lebar yang sama
|
|
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,
|
|
},
|
|
badgeText: { color: "#fff", fontSize: 10, fontWeight: "bold" },
|
|
});
|
|
|
|
export default BottomTabAdmin;
|