Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
8.5 kB · 252 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253import {useEffect, useEffectEvent, useState} from 'react'import {Pressable, View} from 'react-native'import {ImageBackground} from 'expo-image'import {Trans, useLingui} from '@lingui/react/macro'import {FocusGuards, FocusScope} from 'radix-ui/internal'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'import {Logo} from '#/view/icons/Logo'import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'import {Button, ButtonText} from '#/components/Button'import {type WelcomeModalControl} from '#/components/hooks/useWelcomeModal.shared'import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'import {Text} from '#/components/Typography'import {useAnalytics} from '#/analytics'
const welcomeModalBg = require('../../assets/images/welcome-modal-bg.webp')
interface WelcomeModalProps { control: WelcomeModalControl}
export function WelcomeModal({control}: WelcomeModalProps) { const {t: l} = useLingui() const ax = useAnalytics() const {requestSwitchToAccount} = useLoggedOutViewControls() const {gtMobile} = useBreakpoints() const [isExiting, setIsExiting] = useState(false) const [signInLinkHovered, setSignInLinkHovered] = useState(false) const t = useTheme()
const fadeOutAndClose = (callback?: () => void) => { setIsExiting(true) setTimeout(() => { control.close() if (callback) callback() }, 150) }
const onPresented = useEffectEvent(() => { ax.metric('welcomeModal:presented', {}) })
useEffect(() => { if (control.isOpen) { onPresented() } }, [control.isOpen])
const onPressCreateAccount = () => { ax.metric('welcomeModal:signupClicked', {}) control.close() requestSwitchToAccount({requestedAccount: 'new'}) }
const onPressExplore = () => { ax.metric('welcomeModal:exploreClicked', {}) fadeOutAndClose() }
const onPressSignIn = () => { ax.metric('welcomeModal:signinClicked', {}) control.close() requestSwitchToAccount({requestedAccount: 'existing'}) }
FocusGuards.useFocusGuards()
return ( <View role="dialog" aria-modal style={[ a.fixed, a.inset_0, a.justify_center, a.align_center, {zIndex: 9999, backgroundColor: 'rgba(0,0,0,0.2)'}, web({backdropFilter: 'blur(15px)'}), isExiting ? a.fade_out : a.fade_in, ]}> <FocusScope.FocusScope asChild loop trapped> <View style={flatten([ { maxWidth: 800, maxHeight: 600, width: '90%', height: '90%', backgroundColor: '#c0cdec', }, a.rounded_lg, a.overflow_hidden, a.zoom_in, ])}> <ImageBackground source={welcomeModalBg} style={[a.flex_1, a.justify_center]} contentFit="cover"> <View style={[a.gap_2xl, a.align_center, a.p_4xl]}> <View style={[ a.flex_row, a.align_center, a.justify_center, a.w_full, a.p_0, ]}> <View style={[a.flex_row, a.align_center, a.gap_xs]}> <Logo allowVariants={false} width={26} /> <Text style={[ a.text_2xl, a.font_semi_bold, a.user_select_none, {color: 'rgb(42, 40, 40)', letterSpacing: -0.5}, ]}> Witchsky </Text> </View> </View> <View style={[ a.gap_sm, a.align_center, a.pt_5xl, a.pb_3xl, a.mt_2xl, ]}> <Text style={[ gtMobile ? a.text_4xl : a.text_3xl, a.font_semi_bold, a.text_center, {color: 'rgb(55, 45, 45)'}, web({ backgroundImage: 'linear-gradient(180deg, rgb(87, 77, 77) 0%, rgb(95, 68, 68) 83.65%, rgba(107, 68, 68, 0.47) 100%)', backgroundClip: 'text', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', color: 'transparent', lineHeight: 1.2, letterSpacing: -0.5, }), ]}> <Trans>Real talk.</Trans> {'\n'} <Trans>Real creatures.</Trans> {'\n'} <Trans>Social media if it was good.</Trans> </Text> </View> <View style={[a.gap_md, a.align_center]}> <View> <Button onPress={onPressCreateAccount} label={l`Create account`} size="large" color="primary" style={{ width: 200, backgroundColor: t.palette.primary_500, }}> <ButtonText> <Trans>Create account</Trans> </ButtonText> </Button> <Button onPress={onPressExplore} label={l`Explore the app`} size="large" color="primary" variant="ghost" style={[a.bg_transparent, {width: 200}]} hoverStyle={[a.bg_transparent]}> {({hovered}) => ( <ButtonText style={[ hovered && [a.underline], {color: t.palette.primary_500}, ]}> <Trans>Explore the app</Trans> </ButtonText> )} </Button> </View> <View style={[a.align_center, {minWidth: 200}]}> <Text style={[ a.text_md, a.text_center, {color: 'rgb(58, 50, 50)', lineHeight: 24}, ]}> <Trans>Already have an account?</Trans>{' '} <Pressable onPress={onPressSignIn} onPointerEnter={() => setSignInLinkHovered(true)} onPointerLeave={() => setSignInLinkHovered(false)} accessibilityRole="button" accessibilityLabel={l`Sign in`} accessibilityHint=""> <Text style={[ a.font_medium, { color: t.palette.primary_500, fontSize: undefined, }, signInLinkHovered && a.underline, ]}> <Trans>Sign in</Trans> </Text> </Pressable> </Text> </View> </View> </View> <Button label={l`Close welcome modal`} style={[ a.absolute, { top: 8, right: 8, }, a.bg_transparent, ]} hoverStyle={[a.bg_transparent]} onPress={() => { ax.metric('welcomeModal:dismissed', {}) fadeOutAndClose() }} color="secondary" size="small" variant="ghost" shape="round"> {({hovered, pressed, focused}) => ( <XIcon size="md" style={{ color: 'rgb(77, 47, 47)', opacity: hovered || pressed || focused ? 1 : 0.7, }} /> )} </Button> </ImageBackground> </View> </FocusScope.FocusScope> </View> )}