76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { colors } from '../../utils/constants';
|
|
import { formatPrice } from '../../utils/formatPrice';
|
|
|
|
export default function ShoppingListItem({ item, onToggle, onDelete }) {
|
|
return (
|
|
<View style={styles.row}>
|
|
<Pressable accessibilityRole="checkbox" onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
|
|
<Text style={styles.checkText}>{item.checked ? '✓' : ''}</Text>
|
|
</Pressable>
|
|
<View style={styles.copy}>
|
|
<Text style={[styles.name, item.checked ? styles.done : null]}>{item.productName}</Text>
|
|
<Text style={styles.meta}>Menge {item.quantity} · {formatPrice(item.estimatedPrice, 'CHF')}</Text>
|
|
</View>
|
|
<Pressable accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
|
|
<Text style={styles.deleteText}>Löschen</Text>
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
alignItems: 'center',
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
padding: 14
|
|
},
|
|
checkbox: {
|
|
alignItems: 'center',
|
|
borderColor: colors.primary,
|
|
borderRadius: 6,
|
|
borderWidth: 2,
|
|
height: 28,
|
|
justifyContent: 'center',
|
|
width: 28
|
|
},
|
|
checked: {
|
|
backgroundColor: colors.primary
|
|
},
|
|
checkText: {
|
|
color: colors.surface,
|
|
fontWeight: '800'
|
|
},
|
|
copy: {
|
|
flex: 1
|
|
},
|
|
name: {
|
|
color: colors.text,
|
|
fontSize: 16,
|
|
fontWeight: '800'
|
|
},
|
|
done: {
|
|
textDecorationLine: 'line-through'
|
|
},
|
|
meta: {
|
|
color: colors.muted,
|
|
fontSize: 13,
|
|
marginTop: 3
|
|
},
|
|
deleteButton: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 6
|
|
},
|
|
deleteText: {
|
|
color: colors.danger,
|
|
fontSize: 13,
|
|
fontWeight: '800'
|
|
}
|
|
});
|