32 lines
800 B
TypeScript
32 lines
800 B
TypeScript
import React from 'react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Glow } from './Glow';
|
|
|
|
export interface AuthLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const AuthLayout = ({ children }: AuthLayoutProps) => {
|
|
return (
|
|
<Box
|
|
as="main"
|
|
minHeight="100vh"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
padding={4}
|
|
bg="var(--ui-color-bg-base)"
|
|
position="relative"
|
|
style={{ overflow: 'hidden' }}
|
|
>
|
|
<Glow color="primary" size="xl" opacity={0.05} position="top-right" />
|
|
<Glow color="aqua" size="xl" opacity={0.05} position="bottom-left" />
|
|
|
|
<Box width="100%" maxWidth="25rem" position="relative" zIndex={10}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|