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