Function AuthCard

src/Components/Auth/AuthShared.jsx:21–50

({children, ...formProps})

}

export function AuthCard({children, ...formProps}) {
    return (
        <Box sx={{
            minHeight: 'calc(100vh - 60px)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            px: 2,
            py: 4,
        }}>
            <Paper
                component={Form}
                elevation={0}
                {...formProps}
                sx={{
                    width: '100%',
                    maxWidth: 430,
                    bgcolor: (theme) => theme.palette.surface,
                    borderRadius: 3,
                    p: {xs: 3, sm: 4},
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 2,
                }}
            >
                {children}
            </Paper>
        </Box>
    );
}

export function AuthHeader({subtitle}) {
    const dark = useTheme().palette.mode === 'dark';