51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
|
|
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {Text} from './Text'
|
|
import {UserGroupIcon} from '../../lib/icons'
|
|
import {colors} from '../../lib/styles'
|
|
|
|
export function EmptyState({
|
|
icon,
|
|
message,
|
|
style,
|
|
}: {
|
|
icon: IconProp | 'user-group'
|
|
message: string
|
|
style?: StyleProp<ViewStyle>
|
|
}) {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.iconContainer}>
|
|
{icon === 'user-group' ? (
|
|
<UserGroupIcon size="64" style={styles.icon} />
|
|
) : (
|
|
<FontAwesomeIcon icon={icon} size={64} style={styles.icon} />
|
|
)}
|
|
</View>
|
|
<Text style={styles.text}>{message}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingVertical: 20,
|
|
paddingHorizontal: 36,
|
|
},
|
|
iconContainer: {
|
|
flexDirection: 'row',
|
|
},
|
|
icon: {
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
color: colors.gray3,
|
|
},
|
|
text: {
|
|
textAlign: 'center',
|
|
color: colors.gray5,
|
|
paddingTop: 16,
|
|
fontSize: 16,
|
|
},
|
|
})
|