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