57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { AppBar, Toolbar, Typography, IconButton, Box, Container, Badge } from '@mui/material'
|
|
import { Brightness4, Brightness7, FiberManualRecord } from '@mui/icons-material'
|
|
import { useUIStore } from '../stores/uiStore'
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
const { theme, toggleTheme, wsConnected } = useUIStore()
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
|
|
<AppBar position="static" color="default" elevation={1}>
|
|
<Toolbar>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 600 }}>
|
|
🎵 Audio Splitter
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Badge
|
|
color={wsConnected ? 'success' : 'error'}
|
|
variant="dot"
|
|
sx={{ mr: 1 }}
|
|
>
|
|
<FiberManualRecord
|
|
sx={{
|
|
fontSize: 12,
|
|
color: wsConnected ? 'green' : 'red',
|
|
visibility: 'hidden',
|
|
}}
|
|
/>
|
|
</Badge>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{wsConnected ? 'Connected' : 'Disconnected'}
|
|
</Typography>
|
|
|
|
<IconButton onClick={toggleTheme} color="inherit">
|
|
{theme === 'light' ? <Brightness4 /> : <Brightness7 />}
|
|
</IconButton>
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Container maxWidth="lg" sx={{ flex: 1, py: 4 }}>
|
|
{children}
|
|
</Container>
|
|
|
|
<Box component="footer" sx={{ py: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Audio Splitter v0.1.0 • Built with ❤️
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |