31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import type { ReactNode } from 'react';
|
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { AppText } from './app-text';
|
|
import { Card } from './card';
|
|
import { colors, radius, spacing } from './tokens';
|
|
|
|
type Props = {
|
|
icon: keyof typeof Ionicons.glyphMap;
|
|
title: string;
|
|
message: string;
|
|
action?: ReactNode;
|
|
style?: StyleProp<ViewStyle>;
|
|
};
|
|
|
|
export function EmptyState({ icon, title, message, action, style }: Props) {
|
|
return <Card style={style} padding={spacing[7]}>
|
|
<View style={styles.icon}><Ionicons name={icon} size={24} color={colors.brand.cobalt} /></View>
|
|
<AppText variant="title" style={styles.title}>{title}</AppText>
|
|
<AppText variant="bodySmall" color={colors.neutral.textSecondary} style={styles.message}>{message}</AppText>
|
|
{action ? <View style={styles.action}>{action}</View> : null}
|
|
</Card>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
icon: { width: 48, height: 48, borderRadius: radius.control, backgroundColor: colors.brand.sky, alignItems: 'center', justifyContent: 'center', alignSelf: 'center' },
|
|
title: { marginTop: spacing[4], textAlign: 'center' },
|
|
message: { marginTop: spacing[2], textAlign: 'center' },
|
|
action: { marginTop: spacing[5], alignSelf: 'stretch' },
|
|
});
|