init

src/features/login/components/layout.tsx

@@ -0,0 +1,45 @@
+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={150} />
+              <Title order={2} ta='center'>Welcome to FLXN</Title>
+            </Stack>
+            {children}
+          </Paper>
+        </Flex>
+      </AppShell.Main>
+    </AppShell>
+  );
+};
+
+export default Layout;