67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import GlitchAvatar from '@/components/glitch-avatar';
|
|
import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
|
|
import { useCurrentTournament } from '@/features/tournaments/queries';
|
|
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();
|
|
const { data: tournament } = useCurrentTournament();
|
|
|
|
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'>
|
|
<GlitchAvatar
|
|
name={tournament.name}
|
|
contain
|
|
src={
|
|
tournament.logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
|
|
: undefined
|
|
}
|
|
glitchSrc={
|
|
tournament.glitch_logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
|
|
: undefined
|
|
}
|
|
radius="md"
|
|
size={250}
|
|
px="xs"
|
|
withBorder={false}
|
|
>
|
|
<TrophyIcon size={32} />
|
|
</GlitchAvatar>
|
|
<Title order={1} ta='center'>Welcome to FLXN</Title>
|
|
</Stack>
|
|
{children}
|
|
</Paper>
|
|
</Flex>
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
};
|
|
|
|
export default Layout; |