Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {useCallback} from 'react'
2import {StyleSheet, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 type FontAwesomeIconStyle,
6} from '@fortawesome/react-native-fontawesome'
7import {Trans} from '@lingui/react/macro'
8import {useNavigation} from '@react-navigation/native'
9
10import {usePalette} from '#/lib/hooks/usePalette'
11import {MagnifyingGlassIcon} from '#/lib/icons'
12import {type NavigationProp} from '#/lib/routes/types'
13import {s} from '#/lib/styles'
14import {IS_WEB} from '#/env'
15import {Button} from '../util/forms/Button'
16import {Text} from '../util/text/Text'
17
18export function FollowingEmptyState() {
19 const pal = usePalette('default')
20 const palInverted = usePalette('inverted')
21 const navigation = useNavigation<NavigationProp>()
22
23 const onPressFindAccounts = useCallback(() => {
24 if (IS_WEB) {
25 navigation.navigate('Search', {})
26 } else {
27 navigation.navigate('SearchTab')
28 navigation.popToTop()
29 }
30 }, [navigation])
31
32 const onPressDiscoverFeeds = useCallback(() => {
33 navigation.navigate('Feeds')
34 }, [navigation])
35
36 return (
37 <View style={styles.container}>
38 <View style={styles.inner}>
39 <View style={styles.iconContainer}>
40 <MagnifyingGlassIcon style={[styles.icon, pal.text]} size={62} />
41 </View>
42 <Text type="xl-medium" style={[s.textCenter, pal.text]}>
43 <Trans>
44 Your following feed is empty! Follow more users to see what's
45 happening.
46 </Trans>
47 </Text>
48 <Button
49 type="inverted"
50 style={styles.emptyBtn}
51 onPress={onPressFindAccounts}>
52 <Text type="lg-medium" style={palInverted.text}>
53 <Trans>Find accounts to follow</Trans>
54 </Text>
55 <FontAwesomeIcon
56 icon="angle-right"
57 style={palInverted.text as FontAwesomeIconStyle}
58 size={14}
59 />
60 </Button>
61
62 <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
63 <Trans>You can also discover new Custom Feeds to follow.</Trans>
64 </Text>
65 <Button
66 type="inverted"
67 style={[styles.emptyBtn, s.mt10]}
68 onPress={onPressDiscoverFeeds}>
69 <Text type="lg-medium" style={palInverted.text}>
70 <Trans>Discover new custom feeds</Trans>
71 </Text>
72 <FontAwesomeIcon
73 icon="angle-right"
74 style={palInverted.text as FontAwesomeIconStyle}
75 size={14}
76 />
77 </Button>
78 </View>
79 </View>
80 )
81}
82const styles = StyleSheet.create({
83 container: {
84 height: '100%',
85 flexDirection: 'row',
86 justifyContent: 'center',
87 paddingVertical: 40,
88 paddingHorizontal: 30,
89 },
90 inner: {
91 width: '100%',
92 maxWidth: 460,
93 },
94 iconContainer: {
95 marginBottom: 16,
96 },
97 icon: {
98 marginLeft: 'auto',
99 marginRight: 'auto',
100 },
101 emptyBtn: {
102 marginVertical: 20,
103 flexDirection: 'row',
104 alignItems: 'center',
105 justifyContent: 'space-between',
106 paddingVertical: 18,
107 paddingHorizontal: 24,
108 borderRadius: 30,
109 },
110})