27 lines
1,019 B
TypeScript
27 lines
1,019 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
import { AuthFooter } from './AuthFooter';
|
|
import { AuthMascot } from './AuthMascot';
|
|
import { authLayoutRootVars } from './layoutConfig';
|
|
import * as css from './styles.css';
|
|
|
|
type AuthSplashScreenProps = {
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export function AuthSplashScreen({ children }: AuthSplashScreenProps) {
|
|
// No children = bare splash gate (cold init, sync wait): center the mascot
|
|
// to match the Android 12+ native splash and bridge the native → web
|
|
// handoff. With children (errors, missing-IDB, retry dialogs) keep the
|
|
// top-anchored mascot so the dialog has the lower half free.
|
|
const splash = !children;
|
|
return (
|
|
<div className={css.AuthLayout} style={authLayoutRootVars}>
|
|
<div className={splash ? `${css.AuthStack} ${css.AuthStackSplash}` : css.AuthStack}>
|
|
<AuthMascot centered={splash} />
|
|
{children && <div className={css.AuthSplashContent}>{children}</div>}
|
|
</div>
|
|
{!splash && <AuthFooter />}
|
|
</div>
|
|
);
|
|
}
|