45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
|
|
import { AppShell, Flex, Paper, em, Title, Stack } from '@mantine/core';
|
|
import { useMediaQuery, useViewportSize } from '@mantine/hooks';
|
|
import { TrophyIcon } from '@phosphor-icons/react';
|
|
import { PropsWithChildren } from 'react';
|
|
|
|
const Layout: React.FC<PropsWithChildren> = ({ children }) => {
|
|
const isMobile = useMediaQuery(`(max-width: ${em(450)})`);
|
|
const visualViewport = useVisualViewportSize();
|
|
const viewport = useViewportSize();
|
|
|
|
return (
|
|
<AppShell>
|
|
<AppShell.Main h='100%' style={{ overflow: 'scroll' }}>
|
|
<Flex
|
|
w={isMobile ? '100vw' : em(450)}
|
|
justify='center'
|
|
align='center'
|
|
h='auto'
|
|
direction='column'
|
|
gap='md'
|
|
mx='auto'
|
|
pt={viewport.height === visualViewport.height ? '5rem' : '12.5rem'}
|
|
style={{ transition: 'padding-top 0.1s ease' }}
|
|
>
|
|
<Paper
|
|
shadow='none'
|
|
p='md'
|
|
w='100%'
|
|
maw='375px'
|
|
radius='md'
|
|
>
|
|
<Stack align='center' gap='xs' mb='md'>
|
|
<TrophyIcon size={75} />
|
|
<Title order={4} ta='center'>Welcome to FLXN</Title>
|
|
</Stack>
|
|
{children}
|
|
</Paper>
|
|
</Flex>
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
};
|
|
|
|
export default Layout; |