60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons'
|
|
import { View, Text, StyleSheet } from 'react-native'
|
|
|
|
interface EmptyStateProps {
|
|
icon: keyof typeof Ionicons.glyphMap
|
|
title: string
|
|
subtitle: string
|
|
}
|
|
|
|
export function EmptyState({ icon, title, subtitle }: EmptyStateProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.iconBox}>
|
|
<Ionicons name={icon} size={32} color="#94A3B8" />
|
|
</View>
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.subtitle}>{subtitle}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 80,
|
|
paddingHorizontal: 32,
|
|
},
|
|
iconBox: {
|
|
width: 72,
|
|
height: 72,
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 22,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 18,
|
|
shadowColor: '#1C1917',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
title: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: '#0F172A',
|
|
textAlign: 'center',
|
|
letterSpacing: -0.2,
|
|
},
|
|
subtitle: {
|
|
fontSize: 13,
|
|
color: '#64748B',
|
|
textAlign: 'center',
|
|
marginTop: 6,
|
|
lineHeight: 19,
|
|
},
|
|
})
|
|
|