robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Delete EmptyStateWithButton.tsx (#9348)
samuel.fm
-88
-88
src/view/com/util/EmptyStateWithButton.tsx
-88
src/view/com/util/EmptyStateWithButton.tsx
···
1
-
import {StyleSheet, View} from 'react-native'
2
-
import {type IconProp} from '@fortawesome/fontawesome-svg-core'
3
-
import {
4
-
FontAwesomeIcon,
5
-
type FontAwesomeIconStyle,
6
-
} from '@fortawesome/react-native-fontawesome'
7
-
8
-
import {usePalette} from '#/lib/hooks/usePalette'
9
-
import {s} from '#/lib/styles'
10
-
import {Button} from './forms/Button'
11
-
import {Text} from './text/Text'
12
-
13
-
interface Props {
14
-
testID?: string
15
-
icon: IconProp
16
-
message: string
17
-
buttonLabel: string
18
-
onPress: () => void
19
-
}
20
-
21
-
export function EmptyStateWithButton(props: Props) {
22
-
const pal = usePalette('default')
23
-
const palInverted = usePalette('inverted')
24
-
25
-
return (
26
-
<View testID={props.testID} style={styles.container}>
27
-
<View style={styles.iconContainer}>
28
-
<FontAwesomeIcon
29
-
icon={props.icon}
30
-
style={[styles.icon, pal.text]}
31
-
size={62}
32
-
/>
33
-
</View>
34
-
<Text type="xl-medium" style={[s.textCenter, pal.text]}>
35
-
{props.message}
36
-
</Text>
37
-
<View style={styles.btns}>
38
-
<Button
39
-
testID={props.testID ? `${props.testID}-button` : undefined}
40
-
type="inverted"
41
-
style={styles.btn}
42
-
onPress={props.onPress}>
43
-
<FontAwesomeIcon
44
-
icon="plus"
45
-
style={palInverted.text as FontAwesomeIconStyle}
46
-
size={14}
47
-
/>
48
-
<Text type="lg-medium" style={palInverted.text}>
49
-
{props.buttonLabel}
50
-
</Text>
51
-
</Button>
52
-
</View>
53
-
</View>
54
-
)
55
-
}
56
-
const styles = StyleSheet.create({
57
-
container: {
58
-
height: '100%',
59
-
paddingVertical: 40,
60
-
paddingHorizontal: 30,
61
-
},
62
-
iconContainer: {
63
-
marginBottom: 16,
64
-
},
65
-
icon: {
66
-
marginLeft: 'auto',
67
-
marginRight: 'auto',
68
-
},
69
-
btns: {
70
-
flexDirection: 'row',
71
-
justifyContent: 'center',
72
-
},
73
-
btn: {
74
-
gap: 10,
75
-
marginVertical: 20,
76
-
flexDirection: 'row',
77
-
alignItems: 'center',
78
-
paddingVertical: 14,
79
-
paddingHorizontal: 24,
80
-
borderRadius: 30,
81
-
},
82
-
notice: {
83
-
borderRadius: 12,
84
-
paddingHorizontal: 12,
85
-
paddingVertical: 10,
86
-
marginHorizontal: 30,
87
-
},
88
-
})