94 lines
No EOL
2.7 KiB
JavaScript
94 lines
No EOL
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { Box, Container, Paper, Typography, Button } from '@mui/material';
|
|
import { Link as RouterLink } from 'react-router-dom';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import useBrandingSettings from '@hooks/brandingHooks';
|
|
import imageUtils from '@utils/imageUtils';
|
|
|
|
const AuthLayout = () => {
|
|
// Use the centralized hook to fetch branding settings
|
|
const { data: brandingSettings } = useBrandingSettings();
|
|
|
|
// Get site name and logo from branding settings
|
|
const siteName = brandingSettings?.site_name || 'Rocks, Bones & Sticks';
|
|
const logoUrl = imageUtils.getImageUrl(brandingSettings?.logo_url)
|
|
const copyrightText = brandingSettings?.copyright_text ||
|
|
`© ${new Date().getFullYear()} ${siteName}. All rights reserved.`;
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: '100vh',
|
|
bgcolor: (theme) => theme.palette.mode === 'dark' ? 'background.default' : 'grey.100',
|
|
}}
|
|
>
|
|
<Container maxWidth="sm" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, py: 4 }}>
|
|
<Button
|
|
component={RouterLink}
|
|
to="/"
|
|
startIcon={<ArrowBackIcon />}
|
|
sx={{ alignSelf: 'flex-start', mb: 2 }}
|
|
>
|
|
Back to Home
|
|
</Button>
|
|
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
p: 4,
|
|
mb: 4,
|
|
}}
|
|
>
|
|
{logoUrl ? (
|
|
<Box
|
|
component="img"
|
|
src={logoUrl}
|
|
alt={siteName}
|
|
sx={{
|
|
height: 60,
|
|
maxWidth: '100%',
|
|
mb: 3,
|
|
objectFit: 'contain'
|
|
}}
|
|
/>
|
|
) : (
|
|
<Typography component="h1" variant="h4" gutterBottom>
|
|
{siteName}
|
|
</Typography>
|
|
)}
|
|
|
|
<Box sx={{ width: '100%', mt: 2 }}>
|
|
<Outlet />
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
|
|
<Box
|
|
component="footer"
|
|
sx={{
|
|
py: 2,
|
|
px: 2,
|
|
mt: 'auto',
|
|
backgroundColor: (theme) =>
|
|
theme.palette.mode === 'light'
|
|
? theme.palette.grey[200]
|
|
: theme.palette.grey[800],
|
|
}}
|
|
>
|
|
<Container maxWidth="sm" sx={{ textAlign: 'center' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{copyrightText}
|
|
</Typography>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AuthLayout; |