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