try new layout again

This commit is contained in:
Fox 2026-06-24 13:14:18 +01:00
parent 7c5b884db0
commit ab6c443092

View File

@ -1,4 +1,4 @@
import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, TextField, ToggleButton, Typography } from "@mui/material";
import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, Switch, TextField, ToggleButton, Typography } from "@mui/material";
import getCities from "../functions/getCities";
import FilterState from "../models/filterState";
import { useEffect, useState } from "react";
@ -35,8 +35,6 @@ export default function Sidebar(props : SidebarProps) {
<Typography variant='h5' component='h2'>Filter Conveyancers</Typography>
</Box>
<Box sx={{ p: 2}}>
<Grid container spacing={1} sx={{width: '100%'}}>
<Grid size={10}>
<Typography component='legend'>Firm Name</Typography>
<TextField
label='Firm Name'
@ -44,20 +42,17 @@ export default function Sidebar(props : SidebarProps) {
value={props.filters.namePart}
onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))}
/>
</Grid>
<Grid size={2}>
<ToggleButton
value="check"
selected={props.filters.nameOnly}
onChange={() => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: !props.filters.nameOnly}))}
>
{props.filters.nameOnly
? <CheckIcon color='success' />
: <ClearIcon color='error' />}
</ToggleButton>
</Grid>
</Grid>
</Box>
<Divider />
<Box sx={{ p: 2}}>
<Typography component='legend'>Search by Firm Name Only</Typography>
<Switch
value={props.filters.nameOnly}
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))}
/>
</Box>
{!props.filters.nameOnly &&
<>
<Divider />
<Box sx={{ p: 2}}>
<Typography component='legend'>Cities</Typography>
@ -140,6 +135,7 @@ export default function Sidebar(props : SidebarProps) {
})}
</Select>
</Box>
</>}
</Paper>
)
}