robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import Animated, {Easing, FadeInDown, FadeOut} from 'react-native-reanimated'
2import {type ComAtprotoTempCheckHandleAvailability} from '@atproto/api'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {atoms as a, native, useTheme} from '#/alf'
7import {borderRadius} from '#/alf/tokens'
8import {Button} from '#/components/Button'
9import {Text} from '#/components/Typography'
10
11export function HandleSuggestions({
12 suggestions,
13 onSelect,
14}: {
15 suggestions: ComAtprotoTempCheckHandleAvailability.Suggestion[]
16 onSelect: (
17 suggestions: ComAtprotoTempCheckHandleAvailability.Suggestion,
18 ) => void
19}) {
20 const t = useTheme()
21 const {_} = useLingui()
22
23 return (
24 <Animated.View
25 entering={native(FadeInDown.easing(Easing.out(Easing.exp)))}
26 exiting={native(FadeOut)}
27 style={[
28 a.flex_1,
29 a.border,
30 a.rounded_sm,
31 t.atoms.shadow_sm,
32 t.atoms.bg,
33 t.atoms.border_contrast_low,
34 a.mt_xs,
35 a.z_50,
36 a.w_full,
37 a.zoom_fade_in,
38 ]}>
39 {suggestions.map((suggestion, index) => (
40 <Button
41 label={_(
42 msg({
43 message: `Select ${suggestion.handle}`,
44 comment: `Accessibility label for a username suggestion in the account creation flow`,
45 }),
46 )}
47 key={index}
48 onPress={() => onSelect(suggestion)}
49 hoverStyle={[t.atoms.bg_contrast_25]}
50 style={[
51 a.w_full,
52 a.flex_row,
53 a.align_center,
54 a.justify_between,
55 a.p_md,
56 a.border_b,
57 t.atoms.border_contrast_low,
58 index === 0 && {
59 borderTopStartRadius: borderRadius.sm,
60 borderTopEndRadius: borderRadius.sm,
61 },
62 index === suggestions.length - 1 && [
63 {
64 borderBottomStartRadius: borderRadius.sm,
65 borderBottomEndRadius: borderRadius.sm,
66 },
67 a.border_b_0,
68 ],
69 ]}>
70 <Text style={[a.text_md]}>{suggestion.handle}</Text>
71 <Text style={[a.text_sm, {color: t.palette.positive_700}]}>
72 <Trans comment="Shown next to an available username suggestion in the account creation flow">
73 Available
74 </Trans>
75 </Text>
76 </Button>
77 ))}
78 </Animated.View>
79 )
80}