frontend/src/components/Layout.tsx - master - AtlasProgrammer/pp-heat-map

frontend/src/components/Layout.tsx
75 строк2 KB
AtlasProgrammer
upload files frontend
07 ноя 2025, 13:02
07 ноя 2025, 13:02e56909e
import React from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Tabs,
  Tab,
  Box,
  Container,
} from '@mui/material';
import { useNavigate, useLocation } from 'react-router-dom';
import { LocalFireDepartment } from '@mui/icons-material';

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const getTabValue = () => {
    switch (location.pathname) {
      case '/':
        return 0;
      case '/satellite':
        return 1;
      case '/firms':
        return 2;
      case '/history':
        return 3;
      case '/settings':
        return 4;
      default:
        return 0;
    }
  };

  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
    const routes = ['/', '/satellite', '/firms', '/history', '/settings'];
    navigate(routes[newValue]);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar position="sticky" elevation={1}>
        <Toolbar>
          <LocalFireDepartment sx={{ mr: 2, fontSize: 32 }} />
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Система анализа тепловых карт
          </Typography>
          <Tabs
            value={getTabValue()}
            onChange={handleTabChange}
            textColor="inherit"
            indicatorColor="secondary"
            sx={{ minHeight: 64 }}
          >
            <Tab label="Анализ изображений" />
            <Tab label="Спутниковые данные" />
            <Tab label="FIRMS данные" />
            <Tab label="История" />
            <Tab label="Настройки" />
          </Tabs>
        </Toolbar>
      </AppBar>
      
      <Container maxWidth="xl" sx={{ flex: 1, py: 3 }}>
        {children}
      </Container>
    </Box>
  );
};

export default Layout;