37227369d3
- Initialize Next.js 14 web application with Material UI and TypeScript - Implement authentication (login/register) with device fingerprint - Create mobile-first responsive layout with app shell pattern - Add tracking pages for feeding, sleep, and diaper changes - Implement activity history with filtering - Configure backend CORS for web frontend (port 3030) - Update backend port to 3020, frontend to 3030 - Fix API response handling for auth endpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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>
|
|
);
|
|
};
|