forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {type ChatBskyActorDefs} from '@atproto/api'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
8import {atoms as a, useTheme} from '#/alf'
9import {AvatarStack} from '#/components/AvatarStack'
10import {ButtonIcon, ButtonText} from '#/components/Button'
11import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
12import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
13import {Link} from '#/components/Link'
14
15export function InboxPreview({
16 profiles,
17}: {
18 profiles: ChatBskyActorDefs.ProfileViewBasic[]
19}) {
20 const {_} = useLingui()
21 const t = useTheme()
22 const enableSquareButtons = useEnableSquareButtons()
23 return (
24 <Link
25 label={_(msg`Chat request inbox`)}
26 style={[
27 a.flex_1,
28 a.px_xl,
29 a.py_sm,
30 a.flex_row,
31 a.align_center,
32 a.gap_md,
33 a.border_t,
34 {marginTop: a.border_t.borderTopWidth * -1},
35 a.border_b,
36 t.atoms.border_contrast_low,
37 {minHeight: 44},
38 a.rounded_0,
39 ]}
40 to="/messages/inbox"
41 color="secondary"
42 variant="solid">
43 <View style={[a.relative]}>
44 <ButtonIcon icon={EnvelopeIcon} size="lg" />
45 {profiles.length > 0 && (
46 <View
47 style={[
48 a.absolute,
49 enableSquareButtons ? a.rounded_sm : a.rounded_full,
50 a.z_20,
51 {
52 top: -4,
53 right: -5,
54 width: 10,
55 height: 10,
56 backgroundColor: t.palette.primary_500,
57 },
58 ]}
59 />
60 )}
61 </View>
62 <ButtonText
63 style={[a.flex_1, a.font_semi_bold, a.text_left]}
64 numberOfLines={1}>
65 <Trans>Chat requests</Trans>
66 </ButtonText>
67 <AvatarStack
68 profiles={profiles}
69 backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
70 />
71 <ButtonIcon icon={ArrowRightIcon} size="lg" />
72 </Link>
73 )
74}