Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x | /**
* @file PublicShellContent.tsx
* @description
* Main content area for public shell with Suspense fallback.
* Renders outlet for unauthenticated routes (Home, Login, LogoutSuccess).
*
* @enterprise
* - Responsive spacing (xs: 2, md: 3)
* - Suspense boundary with loading fallback
* - Proper spacing below fixed AppBar via Toolbar
* - Full viewport height with scrollable content
*
* @example
* ```tsx
* <PublicShellContent />
* ```
*/
import * as React from 'react';
import { Outlet } from 'react-router-dom';
import { Box, Toolbar, Typography } from '@mui/material';
/**
* Fallback component while pages load
*/
const Fallback: React.FC = () => (
<Box sx={{ textAlign: 'center', py: 8 }}>
<Typography variant="body2" color="text.secondary">
Loading...
</Typography>
</Box>
);
/**
* PublicShellContent component
* @returns Main content area with route outlet
*/
const PublicShellContent: React.FC = () => (
<Box component="main" sx={{ flex: 1, p: { xs: 2, md: 3 }, overflowY: 'auto' }}>
<Toolbar /> {/* Spacing below fixed AppBar */}
<React.Suspense fallback={<Fallback />}>
<Outlet />
</React.Suspense>
</Box>
);
export default PublicShellContent;
|