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