mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
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 {ServerInputDialog} from '#/view/com/auth/server-input'
8import {atoms as a, tokens, useTheme} from '#/alf'
9import {Button, ButtonIcon, ButtonText} from '#/components/Button'
10import {useDialogControl} from '#/components/Dialog'
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
22 onSelectServiceUrl: (provider: string) => void
23 onOpenDialog?: () => void
24 minimal?: boolean
25}) {
26 const serverInputControl = useDialogControl()
27 const t = useTheme()
28 const {_} = useLingui()
29
30 const onPressSelectService = React.useCallback(() => {
31 Keyboard.dismiss()
32 serverInputControl.open()
33 onOpenDialog?.()
34 }, [onOpenDialog, serverInputControl])
35
36 return (
37 <>
38 <ServerInputDialog
39 control={serverInputControl}
40 onSelect={onSelectServiceUrl}
41 />
42 {minimal ? (
43 <View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_xs]}>
44 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
45 <Trans>You are creating an account on</Trans>
46 </Text>
47 <Button
48 label={toNiceDomain(serviceUrl)}
49 accessibilityHint={_(msg`Changes hosting provider`)}
50 onPress={onPressSelectService}
51 variant="ghost"
52 color="secondary"
53 size="tiny"
54 style={[
55 a.px_xs,
56 {marginHorizontal: tokens.space.xs * -1},
57 {paddingVertical: 0},
58 ]}>
59 <ButtonText style={[a.text_sm]}>
60 {toNiceDomain(serviceUrl)}
61 </ButtonText>
62 <ButtonIcon icon={PencilIcon} />
63 </Button>
64 </View>
65 ) : (
66 <Button
67 testID="selectServiceButton"
68 label={toNiceDomain(serviceUrl)}
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]}>{toNiceDomain(serviceUrl)}</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}