71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { Feather } from '@expo/vector-icons';
|
|
|
|
type MenuItemProps = {
|
|
icon: string;
|
|
label: string;
|
|
badge?: number;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
const MenuItem = ({ icon, label, badge, onPress }: MenuItemProps) => {
|
|
return (
|
|
<TouchableOpacity style={styles.menuItem} onPress={onPress}>
|
|
<View style={styles.menuItemLeft}>
|
|
<Feather name={icon as any} size={20} color="#374151" />
|
|
<Text style={styles.menuItemText}>{label}</Text>
|
|
</View>
|
|
<View style={styles.menuItemRight}>
|
|
{badge ? (
|
|
<View style={styles.menuBadge}>
|
|
<Text style={styles.menuBadgeText}>{badge}</Text>
|
|
</View>
|
|
) : null}
|
|
<Feather name="chevron-right" size={18} color="#9CA3AF" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
export default MenuItem;
|
|
|
|
const styles = StyleSheet.create({
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#E5E7EB',
|
|
marginHorizontal: 15
|
|
},
|
|
menuItemLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
menuItemText: {
|
|
fontSize: 15,
|
|
color: '#374151',
|
|
},
|
|
menuItemRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
menuBadge: {
|
|
backgroundColor: '#F59E0B',
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
menuBadgeText: {
|
|
color: 'white',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
});
|