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