70 lines
2 KiB
TypeScript
70 lines
2 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
|
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
|
import {
|
|
Page,
|
|
PageContent,
|
|
PageContentCenter,
|
|
PageHeader,
|
|
PageHero,
|
|
PageHeroSection,
|
|
} from '../../../components/page';
|
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
|
|
|
type BotStatePageProps = {
|
|
title: ReactNode;
|
|
description: ReactNode;
|
|
icon?: ReactNode;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export function BotStatePage({ title, description, icon, children }: BotStatePageProps) {
|
|
const screenSize = useScreenSizeContext();
|
|
|
|
return (
|
|
<Page>
|
|
{screenSize === ScreenSize.Mobile && (
|
|
<PageHeader balance outlined={false}>
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
|
<BackRouteHandler>
|
|
{(onBack) => (
|
|
<IconButton onClick={onBack}>
|
|
<Icon src={Icons.ArrowLeft} />
|
|
</IconButton>
|
|
)}
|
|
</BackRouteHandler>
|
|
<Text size="H4" truncate>
|
|
{title}
|
|
</Text>
|
|
</Box>
|
|
</PageHeader>
|
|
)}
|
|
<Box grow="Yes">
|
|
<Scroll hideTrack visibility="Hover">
|
|
<PageContent>
|
|
<PageContentCenter>
|
|
<PageHeroSection>
|
|
<PageHero
|
|
icon={icon ?? <Icon size="600" src={Icons.Info} />}
|
|
title={title}
|
|
subTitle={description}
|
|
>
|
|
{children && (
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
gap="200"
|
|
style={{ paddingTop: config.space.S200 }}
|
|
>
|
|
{children}
|
|
</Box>
|
|
)}
|
|
</PageHero>
|
|
</PageHeroSection>
|
|
</PageContentCenter>
|
|
</PageContent>
|
|
</Scroll>
|
|
</Box>
|
|
</Page>
|
|
);
|
|
}
|