Blame · Line-by-line history
ErrorBanner.tsx
Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.
| 9989d86 | 1 | import React from 'react'; |
| 2 | import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; | |
| 3 | import { colors } from '../theme/colors'; | |
| 4 | ||
| 5 | interface ErrorBannerProps { | |
| 6 | message: string; | |
| 7 | onRetry?: () => void; | |
| 8 | } | |
| 9 | ||
| 10 | export function ErrorBanner({ message, onRetry }: ErrorBannerProps): React.ReactElement { | |
| 11 | return ( | |
| 12 | <View style={styles.container}> | |
| 13 | <Text style={styles.icon}>⚠</Text> | |
| 14 | <Text style={styles.message}>{message}</Text> | |
| 15 | {onRetry !== undefined && ( | |
| 16 | <TouchableOpacity style={styles.retryButton} onPress={onRetry} activeOpacity={0.7}> | |
| 17 | <Text style={styles.retryText}>Retry</Text> | |
| 18 | </TouchableOpacity> | |
| 19 | )} | |
| 20 | </View> | |
| 21 | ); | |
| 22 | } | |
| 23 | ||
| 24 | const styles = StyleSheet.create({ | |
| 25 | container: { | |
| 26 | margin: 16, | |
| 27 | padding: 16, | |
| 28 | backgroundColor: colors.bgSecondary, | |
| 29 | borderRadius: 8, | |
| 30 | borderWidth: 1, | |
| 31 | borderColor: colors.accentRed, | |
| 32 | alignItems: 'center', | |
| 33 | gap: 8, | |
| 34 | }, | |
| 35 | icon: { | |
| 36 | fontSize: 20, | |
| 37 | color: colors.accentRed, | |
| 38 | }, | |
| 39 | message: { | |
| 40 | fontSize: 14, | |
| 41 | color: colors.text, | |
| 42 | textAlign: 'center', | |
| 43 | lineHeight: 20, | |
| 44 | }, | |
| 45 | retryButton: { | |
| 46 | marginTop: 4, | |
| 47 | paddingHorizontal: 20, | |
| 48 | paddingVertical: 8, | |
| 49 | backgroundColor: colors.bgTertiary, | |
| 50 | borderRadius: 6, | |
| 51 | borderWidth: 1, | |
| 52 | borderColor: colors.border, | |
| 53 | }, | |
| 54 | retryText: { | |
| 55 | fontSize: 14, | |
| 56 | fontWeight: '500', | |
| 57 | color: colors.textLink, | |
| 58 | }, | |
| 59 | }); |