Spence Pope
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import {View} from 'react-native'
|
|
import {useLingui} from '@lingui/react/macro'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {CircleInfo_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/CircleInfo'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
/**
|
|
* Web fallback - QR scanning relies on the device camera and is native-only by
|
|
* design. The route is registered on all platforms, so a web user reaching
|
|
* /invite/scan via a direct URL gets this message instead of the native
|
|
* camera UI.
|
|
*/
|
|
export function InviteScannerScreen() {
|
|
const {t: l} = useLingui()
|
|
const t = useTheme()
|
|
return (
|
|
<Layout.Screen>
|
|
<Layout.Header.Outer>
|
|
<Layout.Header.BackButton />
|
|
<Layout.Header.Content>
|
|
<Layout.Header.TitleText>{l`Scan QR code`}</Layout.Header.TitleText>
|
|
</Layout.Header.Content>
|
|
<Layout.Header.Slot />
|
|
</Layout.Header.Outer>
|
|
<View
|
|
style={[a.flex_1, a.align_center, a.justify_center, a.p_xl, a.gap_md]}>
|
|
<InfoIcon size="xl" fill={t.atoms.text_contrast_medium.color} />
|
|
<Text style={[a.text_xl, a.font_bold, a.text_center]}>
|
|
{l`Not available on this platform`}
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
a.text_md,
|
|
a.text_center,
|
|
t.atoms.text_contrast_medium,
|
|
{maxWidth: 320},
|
|
]}>
|
|
{l`Please use the Bluesky mobile app to scan a QR code.`}
|
|
</Text>
|
|
</View>
|
|
</Layout.Screen>
|
|
)
|
|
}
|