bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {Dimensions, StyleSheet, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 type 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 {type NavigationProp} from '#/lib/routes/types'
12import {s} from '#/lib/styles'
13import {IS_WEB} from '#/env'
14import {Button} from '../util/forms/Button'
15import {Text} from '../util/text/Text'
16
17export function FollowingEndOfFeed() {
18 const pal = usePalette('default')
19 const palInverted = usePalette('inverted')
20 const navigation = useNavigation<NavigationProp>()
21
22 const onPressFindAccounts = React.useCallback(() => {
23 if (IS_WEB) {
24 navigation.navigate('Search', {})
25 } else {
26 navigation.navigate('SearchTab')
27 navigation.popToTop()
28 }
29 }, [navigation])
30
31 const onPressDiscoverFeeds = React.useCallback(() => {
32 navigation.navigate('Feeds')
33 }, [navigation])
34
35 return (
36 <View
37 style={[
38 styles.container,
39 pal.border,
40 {minHeight: Dimensions.get('window').height * 0.75},
41 ]}>
42 <View style={styles.inner}>
43 <Text type="xl-medium" style={[s.textCenter, pal.text]}>
44 <Trans>
45 You've reached the end of your feed! Find some more accounts to
46 follow.
47 </Trans>
48 </Text>
49 <Button
50 type="inverted"
51 style={styles.emptyBtn}
52 onPress={onPressFindAccounts}>
53 <Text type="lg-medium" style={palInverted.text}>
54 <Trans>Find accounts to follow</Trans>
55 </Text>
56 <FontAwesomeIcon
57 icon="angle-right"
58 style={palInverted.text as FontAwesomeIconStyle}
59 size={14}
60 />
61 </Button>
62
63 <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
64 <Trans>You can also discover new Custom Feeds to follow.</Trans>
65 </Text>
66 <Button
67 type="inverted"
68 style={[styles.emptyBtn, s.mt10]}
69 onPress={onPressDiscoverFeeds}>
70 <Text type="lg-medium" style={palInverted.text}>
71 <Trans>Discover new custom feeds</Trans>
72 </Text>
73 <FontAwesomeIcon
74 icon="angle-right"
75 style={palInverted.text as FontAwesomeIconStyle}
76 size={14}
77 />
78 </Button>
79 </View>
80 </View>
81 )
82}
83const styles = StyleSheet.create({
84 container: {
85 flexDirection: 'row',
86 justifyContent: 'center',
87 paddingTop: 40,
88 paddingBottom: 80,
89 paddingHorizontal: 30,
90 borderTopWidth: 1,
91 },
92 inner: {
93 width: '100%',
94 maxWidth: 460,
95 },
96 emptyBtn: {
97 marginVertical: 20,
98 flexDirection: 'row',
99 alignItems: 'center',
100 justifyContent: 'space-between',
101 paddingVertical: 18,
102 paddingHorizontal: 24,
103 borderRadius: 30,
104 },
105})