lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {StyleSheet, View} from 'react-native'
3import {useNavigation} from '@react-navigation/native'
4import {
5 FontAwesomeIcon,
6 FontAwesomeIconStyle,
7} from '@fortawesome/react-native-fontawesome'
8import {Text} from '../util/text/Text'
9import {Button} from '../util/forms/Button'
10import {MagnifyingGlassIcon} from 'lib/icons'
11import {NavigationProp} from 'lib/routes/types'
12import {usePalette} from 'lib/hooks/usePalette'
13import {s} from 'lib/styles'
14import {isWeb} from 'platform/detection'
15
16export function CustomFeedEmptyState() {
17 const pal = usePalette('default')
18 const palInverted = usePalette('inverted')
19 const navigation = useNavigation<NavigationProp>()
20
21 const onPressFindAccounts = React.useCallback(() => {
22 if (isWeb) {
23 navigation.navigate('Search', {})
24 } else {
25 navigation.navigate('SearchTab')
26 navigation.popToTop()
27 }
28 }, [navigation])
29
30 return (
31 <View style={styles.emptyContainer}>
32 <View style={styles.emptyIconContainer}>
33 <MagnifyingGlassIcon style={[styles.emptyIcon, pal.text]} size={62} />
34 </View>
35 <Text type="xl-medium" style={[s.textCenter, pal.text]}>
36 This feed is empty! You may need to follow more users or tune your
37 language settings.
38 </Text>
39 <Button
40 type="inverted"
41 style={styles.emptyBtn}
42 onPress={onPressFindAccounts}>
43 <Text type="lg-medium" style={palInverted.text}>
44 Find accounts to follow
45 </Text>
46 <FontAwesomeIcon
47 icon="angle-right"
48 style={palInverted.text as FontAwesomeIconStyle}
49 size={14}
50 />
51 </Button>
52 </View>
53 )
54}
55const styles = StyleSheet.create({
56 emptyContainer: {
57 height: '100%',
58 paddingVertical: 40,
59 paddingHorizontal: 30,
60 },
61 emptyIconContainer: {
62 marginBottom: 16,
63 },
64 emptyIcon: {
65 marginLeft: 'auto',
66 marginRight: 'auto',
67 },
68 emptyBtn: {
69 marginVertical: 20,
70 flexDirection: 'row',
71 alignItems: 'center',
72 justifyContent: 'space-between',
73 paddingVertical: 18,
74 paddingHorizontal: 24,
75 borderRadius: 30,
76 },
77
78 feedsTip: {
79 position: 'absolute',
80 left: 22,
81 },
82 feedsTipArrow: {
83 marginLeft: 32,
84 marginTop: 8,
85 },
86})