ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
maxine.puppykitty.racing
1import React from 'react'
2import {Keyboard, View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {toNiceDomain} from '#/lib/strings/url-helpers'
7import {atoms as a, tokens, useTheme} from '#/alf'
8import {Button, ButtonIcon, ButtonText} from '#/components/Button'
9import {useDialogControl} from '#/components/Dialog'
10import {ServerInputDialog} from '#/components/dialogs/ServerInput'
11import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
12import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
13import {Text} from '#/components/Typography'
14
15export function HostingProvider({
16 serviceUrl,
17 onSelectServiceUrl,
18 onOpenDialog,
19 minimal,
20}: {
21 serviceUrl?: string | undefined
22 onSelectServiceUrl: (provider: string) => void
23 onOpenDialog?: () => void
24 minimal?: boolean
25}) {
26 const serverInputControl = useDialogControl()
27 const t = useTheme()
28 const {_} = useLingui()
29 const serviceProviderLabel =
30 serviceUrl === undefined ? _(msg`Automatic`) : toNiceDomain(serviceUrl)
31
32 const onPressSelectService = React.useCallback(() => {
33 Keyboard.dismiss()
34 serverInputControl.open()
35 onOpenDialog?.()
36 }, [onOpenDialog, serverInputControl])
37
38 return (
39 <>
40 <ServerInputDialog
41 control={serverInputControl}
42 onSelect={onSelectServiceUrl}
43 />
44 {minimal ? (
45 <View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_xs]}>
46 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
47 <Trans>You are creating an account on</Trans>
48 </Text>
49 <Button
50 label={serviceProviderLabel}
51 accessibilityHint={_(msg`Changes hosting provider`)}
52 onPress={onPressSelectService}
53 variant="ghost"
54 color="secondary"
55 size="tiny"
56 style={[
57 a.px_xs,
58 {marginHorizontal: tokens.space.xs * -1},
59 {paddingVertical: 0},
60 ]}>
61 <ButtonText style={[a.text_sm]}>{serviceProviderLabel}</ButtonText>
62 <ButtonIcon icon={PencilIcon} />
63 </Button>
64 </View>
65 ) : (
66 <Button
67 testID="selectServiceButton"
68 label={serviceProviderLabel}
69 accessibilityHint={_(msg`Changes hosting provider`)}
70 variant="solid"
71 color="secondary"
72 style={[
73 a.w_full,
74 a.flex_row,
75 a.align_center,
76 a.rounded_sm,
77 a.py_sm,
78 a.pl_md,
79 a.pr_sm,
80 a.gap_xs,
81 ]}
82 onPress={onPressSelectService}>
83 {({hovered, pressed}) => {
84 const interacted = hovered || pressed
85 return (
86 <>
87 <View style={a.pr_xs}>
88 <GlobeIcon
89 size="md"
90 fill={
91 interacted
92 ? t.palette.contrast_800
93 : t.palette.contrast_500
94 }
95 />
96 </View>
97 <Text style={[a.text_md]}>{serviceProviderLabel}</Text>
98 <View
99 style={[
100 a.rounded_sm,
101 interacted
102 ? t.atoms.bg_contrast_300
103 : t.atoms.bg_contrast_100,
104 {marginLeft: 'auto', padding: 6},
105 ]}>
106 <PencilIcon
107 size="sm"
108 style={{
109 color: interacted
110 ? t.palette.contrast_800
111 : t.palette.contrast_500,
112 }}
113 />
114 </View>
115 </>
116 )
117 }}
118 </Button>
119 )}
120 </>
121 )
122}