52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface AuthShellProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* AuthShell
|
|
*
|
|
* The outermost container for all authentication pages.
|
|
* Provides the "calm intensity" background and centered layout.
|
|
*/
|
|
export function AuthShell({ children }: AuthShellProps) {
|
|
return (
|
|
<Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" p={4} bg="base-black" position="relative" overflow="hidden">
|
|
{/* Subtle background glow - top right */}
|
|
<Box
|
|
position="absolute"
|
|
top="-10%"
|
|
right="-10%"
|
|
w="40%"
|
|
h="40%"
|
|
rounded="full"
|
|
bg="rgba(25, 140, 255, 0.05)"
|
|
blur="xl"
|
|
pointerEvents="none"
|
|
aria-hidden="true"
|
|
/>
|
|
{/* Subtle background glow - bottom left */}
|
|
<Box
|
|
position="absolute"
|
|
bottom="-10%"
|
|
left="-10%"
|
|
w="40%"
|
|
h="40%"
|
|
rounded="full"
|
|
bg="rgba(78, 212, 224, 0.05)"
|
|
blur="xl"
|
|
pointerEvents="none"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<Box w="full" maxWidth="400px" position="relative" zIndex={10} animate="fade-in">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|