jerrification badge (pls no spoil)

2026-03-30 14:11:00 +03:00
parent 0419066f45
commit 3d45346963
6 changed files with 167 additions and 1 deletions
@@ -0,0 +1,107 @@
+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>
+    </>
+  )
+}