86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {isAndroid} from '#/platform/detection'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
|
|
import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
|
|
import {useDialogControl} from '../Dialog'
|
|
import {Text} from '../Typography'
|
|
import {ServerInputDialog} from '#/view/com/auth/server-input'
|
|
import {toNiceDomain} from '#/lib/strings/url-helpers'
|
|
import {Button} from '../Button'
|
|
|
|
export function HostingProvider({
|
|
serviceUrl,
|
|
onSelectServiceUrl,
|
|
onOpenDialog,
|
|
}: {
|
|
serviceUrl: string
|
|
onSelectServiceUrl: (provider: string) => void
|
|
onOpenDialog?: () => void
|
|
}) {
|
|
const serverInputControl = useDialogControl()
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
|
|
const onPressSelectService = React.useCallback(() => {
|
|
serverInputControl.open()
|
|
if (onOpenDialog) {
|
|
onOpenDialog()
|
|
}
|
|
}, [onOpenDialog, serverInputControl])
|
|
|
|
return (
|
|
<>
|
|
<ServerInputDialog
|
|
control={serverInputControl}
|
|
onSelect={onSelectServiceUrl}
|
|
/>
|
|
<Button
|
|
label={toNiceDomain(serviceUrl)}
|
|
accessibilityHint={_(msg`Press to change hosting provider`)}
|
|
variant="solid"
|
|
color="secondary"
|
|
style={[
|
|
a.w_full,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.rounded_sm,
|
|
a.px_md,
|
|
a.gap_xs,
|
|
{paddingVertical: isAndroid ? 14 : 9},
|
|
]}
|
|
onPress={onPressSelectService}>
|
|
{({hovered}) => (
|
|
<>
|
|
<View style={a.pr_xs}>
|
|
<Globe
|
|
size="md"
|
|
fill={hovered ? t.palette.contrast_800 : t.palette.contrast_500}
|
|
/>
|
|
</View>
|
|
<Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
|
|
<View
|
|
style={[
|
|
a.rounded_sm,
|
|
hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
|
|
{marginLeft: 'auto', left: 6, padding: 6},
|
|
]}>
|
|
<Pencil
|
|
size="sm"
|
|
style={{
|
|
color: hovered
|
|
? t.palette.contrast_800
|
|
: t.palette.contrast_500,
|
|
}}
|
|
/>
|
|
</View>
|
|
</>
|
|
)}
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|