1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import {useCallback} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs, type ModerationOpts} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
import {makeProfileLink} from '#/lib/routes/links'
import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
import {atoms as a, useTheme} from '#/alf'
import {Link} from '#/components/Link'
import * as ProfileCard from '#/components/ProfileCard'
export function SearchProfileCard({
profile,
moderationOpts,
onPress: onPressInner,
}: {
profile: AppBskyActorDefs.ProfileViewBasic
moderationOpts: ModerationOpts
onPress?: () => void
}) {
const t = useTheme()
const {_} = useLingui()
const qc = useQueryClient()
const onPress = useCallback(() => {
unstableCacheProfileView(qc, profile)
onPressInner?.()
}, [qc, profile, onPressInner])
return (
<Link
testID={`searchAutoCompleteResult-${profile.handle}`}
to={makeProfileLink(profile)}
label={_(msg`View ${profile.handle}'s profile`)}
onPress={onPress}>
{({hovered, pressed}) => (
<View
style={[
a.flex_1,
a.px_md,
a.py_sm,
(hovered || pressed) && t.atoms.bg_contrast_25,
]}>
<ProfileCard.Outer>
<ProfileCard.Header>
<ProfileCard.Avatar
profile={profile}
moderationOpts={moderationOpts}
/>
<ProfileCard.NameAndHandle
profile={profile}
moderationOpts={moderationOpts}
/>
</ProfileCard.Header>
</ProfileCard.Outer>
</View>
)}
</Link>
)
}
|
