42 lines
964 B
TypeScript
42 lines
964 B
TypeScript
'use client';
|
|
|
|
import { Box, Container } from '@mui/material';
|
|
import { MobileNav } from '../MobileNav/MobileNav';
|
|
import { TabBar } from '../TabBar/TabBar';
|
|
import { useMediaQuery } from '@/hooks/useMediaQuery';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface AppShellProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const AppShell = ({ children }: AppShellProps) => {
|
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
const isTablet = useMediaQuery('(max-width: 1024px)');
|
|
|
|
return (
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: '100vh',
|
|
bgcolor: 'background.default',
|
|
pb: isMobile ? '64px' : 0, // Space for tab bar
|
|
}}>
|
|
{!isMobile && <MobileNav />}
|
|
|
|
<Container
|
|
maxWidth={isTablet ? 'md' : 'lg'}
|
|
sx={{
|
|
flex: 1,
|
|
px: isMobile ? 2 : 3,
|
|
py: 3,
|
|
}}
|
|
>
|
|
{children}
|
|
</Container>
|
|
|
|
{isMobile && <TabBar />}
|
|
</Box>
|
|
);
|
|
};
|