aswi2022code-of-duty-gitlab/frontend/src/features/Catalog/Catalog.tsx @ a11b46b5

import {
    Box,
    Button,
    Collapse,
    Container,
    Grid,
    Paper,
    Stack,
    TextField,
    Typography,
} from '@mui/material'
import CatalogTable from './CatalogTable'
import { Fragment, useState } from 'react'

const Catalog = () => {
    const [filterOpen, setFilterOpen] = useState(false)
    const toggleFilter = () => {
        setFilterOpen(!filterOpen)
    }

    return (
        <Fragment>
            <Paper
                sx={{ py: 2, mt: 2 }}
                variant="outlined"
                style={{ minHeight: '50vh' }}
            >
                <Container sx={{ mt: 4 }}>
                    <Typography variant="h3" sx={{mb: 2}} fontWeight="bold" >Catalog</Typography>
                    <Button variant="outlined" color="primary" onClick={toggleFilter}>
                        Filter
                    </Button>
                    <Collapse in={filterOpen} timeout="auto" unmountOnExit>
                        <Grid container spacing={1} alignItems="stretch">
                            <Grid item xs={6}>
                                <Stack
                                    direction="column"
                                    spacing={1}
                                    sx={{ mt: 2 }}
                                >
                                    <Stack direction="row" spacing={2}>
                                        <TextField
                                            size="small"
                                            id="name"
                                            label="Name"
                                        />
                                        <TextField
                                            size="small"
                                            id="type"
                                            label="Type"
                                        />
                                        <TextField
                                            size="small"
                                            id="coordinates"
                                            label="Coordinates"
                                        />
                                    </Stack>
                                    <Stack direction="row" spacing={2}>
                                        <TextField
                                            size="small"
                                            id="writtenForm"
                                            label="Written form"
                                        />
                                        <TextField
                                            size="small"
                                            id="stateOrTerritory"
                                            label="State or territory"
                                        />
                                        <TextField
                                            size="small"
                                            id="groupBy"
                                            label="Group by"
                                        />
                                    </Stack>
                                </Stack>
                            </Grid>
                            <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
                                <Stack
                                    direction="row"
                                    justifyContent="flex-start"
                                    alignItems="flex-end"
                                >
                                    <Button variant="outlined">Search</Button>
                                </Stack>
                            </Grid>
                        </Grid>
                    </Collapse>

                    <Box sx={{ mt: 4 }}>
                        <CatalogTable />
                    </Box>
                </Container>
            </Paper>
        </Fragment>
    )
}

export default Catalog