aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/TrackingTool.tsx @ 788ce11e

import { Button, Grid, Stack, Typography } from '@mui/material'
import { Fragment } from 'react'
import AddIcon from '@mui/icons-material/Add'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import mapConfig from '../../config/mapConfig'

// Page with tracking tool
const TrackingTool = () => {

    return (
        <Fragment>
            <Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
                Tracking Tool
            </Typography>

            <Grid container>
                <Grid item xs={12} md={4}>
                    <Stack
                        direction="row"
                        alignItems="flex-start"
                        spacing={2}
                        sx={{ m: 0, p: 0 }}
                    >
                        <Typography
                            variant="h5"
                            sx={{ mb: 2 }}
                            fontWeight="500"
                        >
                            Upload:
                        </Typography>
                        <Button
                            variant="contained"
                            color="primary"
                            startIcon={<AddIcon />}
                        >
                            Plaintext
                        </Button>
                        <Button
                            variant="contained"
                            color="primary"
                            startIcon={<AddIcon />}
                        >
                            File
                        </Button>
                    </Stack>
                </Grid>
                <Grid item xs={12} md={8} style={{minHeight: '60vh', maxHeight: '100vh', width: '100%'}}>
                    <MapContainer
                        center={[mapConfig.defaultCoordinates[0], mapConfig.defaultCoordinates[1]]}
                        zoom={mapConfig.defaultZoom}
                        style={{ height: '100%', minHeight: '100%' }}
                    >
                    <TileLayer attribution={mapConfig.attribution} url={mapConfig.url} />
                        
                    </MapContainer>
                </Grid>
            </Grid>
        </Fragment>
    )
}

export default TrackingTool