Azmog
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { StyleSheet, Text, View } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Colors } from '@/lib/colors';
|
|
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
|
|
import Button from './Button';
|
|
|
|
interface EmptyStateProps {
|
|
icon?: keyof typeof Ionicons.glyphMap;
|
|
title: string;
|
|
message?: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
}
|
|
|
|
/** État vide homogène : icône, titre, message et action optionnelle. */
|
|
export default function EmptyState({ icon = 'document-text-outline', title, message, actionLabel, onAction }: EmptyStateProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.iconCircle}>
|
|
<Ionicons name={icon} size={32} color={Colors.primary} />
|
|
</View>
|
|
<Text style={styles.title}>{title}</Text>
|
|
{message ? <Text style={styles.message}>{message}</Text> : null}
|
|
{actionLabel && onAction ? (
|
|
<View style={styles.action}>
|
|
<Button title={actionLabel} onPress={onAction} icon="add" />
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { alignItems: 'center', justifyContent: 'center', paddingVertical: Spacing.xxxl, paddingHorizontal: Spacing.xl },
|
|
iconCircle: {
|
|
width: 72,
|
|
height: 72,
|
|
borderRadius: Radius.pill,
|
|
backgroundColor: '#E3E3FD',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
title: { fontSize: FontSize.lg, fontWeight: FontWeight.bold, color: Colors.black, textAlign: 'center' },
|
|
message: { fontSize: FontSize.sm, color: Colors.gray[500], textAlign: 'center', marginTop: Spacing.sm, lineHeight: 20 },
|
|
action: { marginTop: Spacing.xl },
|
|
});
|