52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import React from 'react';
|
|
|
|
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 (
|
|
<Stack as="main" minHeight="screen" align="center" justify="center" p={4} bg="base-black" position="relative" overflow="hidden">
|
|
{/* Subtle background glow - top right */}
|
|
<Stack
|
|
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"
|
|
>{null}</Stack>
|
|
{/* Subtle background glow - bottom left */}
|
|
<Stack
|
|
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"
|
|
>{null}</Stack>
|
|
|
|
<Stack w="full" maxWidth="400px" position="relative" zIndex={10} {...({ animate: "fade-in" } as any)}>
|
|
{children}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|