keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Center search bar and replace filter text with search icon

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-17 23:29:10 +08:00
parent 63b32feb38
commit 6f2fb3900e
1 changed files with 42 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
View file

@ -15,6 +15,7 @@ import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstan
import { useState } from "react"; import { useState } from "react";
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import Autocomplete from "@mui/material/Autocomplete"; import Autocomplete from "@mui/material/Autocomplete";
import SearchIcon from "@mui/icons-material/Search";
export default function EquipmentInstancesListPage() { export default function EquipmentInstancesListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false); const [editmodalOpen, SetEditModalOpen] = useState(false);
@ -67,36 +68,48 @@ export default function EquipmentInstancesListPage() {
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
<div <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
style={{ <div
...styles.flex_row, style={{
...{ alignItems: "center", justifyContent: "flex-start" }, ...styles.flex_row,
}} ...{ alignItems: "center", justifySelf: "flex-start" },
>
<p style={{ ...styles.text_dark, ...styles.text_M }}>Filter: </p>
<Autocomplete
sx={{
display: "inline-block",
"& input": {
width: "256x",
bgcolor: "background.paper",
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}} }}
value={filter} >
onChange={(_event, newValue) => { <SearchIcon
setFilter(newValue); style={{
}} height: 32,
freeSolo width: 32,
id="custom-input-demo" fill: colors.font_dark,
options={["Available", "Broken", "Glassware", "Miscellaneous"]} marginLeft: "1rem",
renderInput={(params) => ( marginRight: "1rem",
<div ref={params.InputProps.ref}> }}
<input type="text" {...params.inputProps} /> />
</div> <Autocomplete
)} sx={{
/> display: "inline-block",
"& input": {
width: "256x",
bgcolor: "background.paper",
color: (theme) =>
theme.palette.getContrastText(
theme.palette.background.paper
),
},
}}
value={filter}
onChange={(_event, newValue) => {
setFilter(newValue);
}}
freeSolo
id="custom-input-demo"
options={["Available", "Broken", "Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
</div>
</div> </div>
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}