59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import { View, Text, StyleSheet } from 'react-native';
|
|
import { Colors, Spacing } from '../constants/theme';
|
|
|
|
type AlertItemProps = {
|
|
message: string;
|
|
type?: 'success' | 'warning' | 'danger';
|
|
};
|
|
|
|
export default function AlertItem({
|
|
message,
|
|
type = 'success',
|
|
}: AlertItemProps) {
|
|
|
|
const theme = Colors.light;
|
|
|
|
const getColor = () => {
|
|
switch (type) {
|
|
case 'success':
|
|
return '#22C55E';
|
|
case 'warning':
|
|
return '#FACC15';
|
|
case 'danger':
|
|
return '#EF4444';
|
|
default:
|
|
return theme.textSecondary;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.bar, { backgroundColor: getColor() }]} />
|
|
<Text style={[styles.text, { color: theme.text }]}>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
padding: Spacing.three,
|
|
marginHorizontal: Spacing.three,
|
|
marginVertical: Spacing.one,
|
|
borderRadius: 12,
|
|
backgroundColor: '#F0F0F3',
|
|
alignItems: 'center',
|
|
},
|
|
bar: {
|
|
width: 6,
|
|
height: '100%',
|
|
borderRadius: 4,
|
|
marginRight: Spacing.two,
|
|
},
|
|
text: {
|
|
fontSize: 14,
|
|
flex: 1,
|
|
},
|
|
}); |