Samuel Newman
108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import {View} from 'react-native'
|
|
import {Trans, useLingui} from '@lingui/react/macro'
|
|
|
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
|
import {atoms as a, web} from '#/alf'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import * as Dialog from '#/components/Dialog'
|
|
import {UnverifiedX} from '#/components/icons/UnverifiedX'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAnalytics} from '#/analytics'
|
|
import type * as bsky from '#/types/bsky'
|
|
import {JerrifiedBadge} from './JerrifiedBadge'
|
|
|
|
export function JerrifiedBadgeButton({
|
|
profile,
|
|
width,
|
|
}: {
|
|
profile: bsky.profile.AnyProfileView
|
|
width: number
|
|
}) {
|
|
const {t: l} = useLingui()
|
|
const ax = useAnalytics()
|
|
const control = Dialog.useDialogControl()
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
label={l`Unverified account`}
|
|
hitSlop={20}
|
|
onPress={evt => {
|
|
evt.preventDefault()
|
|
control.open()
|
|
}}>
|
|
{({hovered}) => (
|
|
<View
|
|
style={[
|
|
a.justify_end,
|
|
a.align_end,
|
|
a.transition_transform,
|
|
{
|
|
width: width,
|
|
height: width,
|
|
transform: [{scale: hovered ? 1.1 : 1}],
|
|
},
|
|
]}>
|
|
<UnverifiedX width={width} />
|
|
</View>
|
|
)}
|
|
</Button>
|
|
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
|
|
<Dialog.Handle />
|
|
<Dialog.ScrollableInner
|
|
label={l`Unverified account`}
|
|
style={web({maxWidth: 350})}
|
|
contentContainerStyle={a.gap_sm}>
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
a.py_lg,
|
|
a.align_center,
|
|
a.flex_row,
|
|
a.justify_center,
|
|
]}>
|
|
<UserAvatar
|
|
avatar={profile.avatar}
|
|
type="user"
|
|
size={60}
|
|
noBorder
|
|
/>
|
|
<View style={[{opacity: 0.5}, a.absolute, a.z_10]}>
|
|
<JerrifiedBadge width={64} />
|
|
</View>
|
|
</View>
|
|
<Text style={[a.text_2xl, a.font_bold, a.leading_snug]}>
|
|
<Trans>Jerry is unverified</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md, a.leading_snug]}>
|
|
<Trans>Do not trust this user under any circumstances.</Trans>
|
|
</Text>
|
|
<Button
|
|
size="small"
|
|
color="primary"
|
|
onPress={() => {
|
|
ax.metric('jerry:no', {})
|
|
control.close()
|
|
}}
|
|
label={l`Jerry, no!`}
|
|
style={[a.mt_sm]}>
|
|
<ButtonText>
|
|
<Trans>Jerry, no!</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
color="secondary"
|
|
onPress={() => control.close()}
|
|
label={l`Close`}>
|
|
<ButtonText>
|
|
<Trans>Close</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
<Dialog.Close />
|
|
</Dialog.ScrollableInner>
|
|
</Dialog.Outer>
|
|
</>
|
|
)
|
|
}
|