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