31 lines
1 KiB
React
31 lines
1 KiB
React
|
import * as React from 'react';
|
||
|
|
import Paper from '@mui/material/Paper';
|
||
|
|
import InputBase from '@mui/material/InputBase';
|
||
|
|
import Divider from '@mui/material/Divider';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
||
|
|
import SearchIcon from '@mui/icons-material/Search';
|
||
|
|
import DirectionsIcon from '@mui/icons-material/Directions';
|
||
|
|
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
|
||
|
|
|
||
|
|
export default function SearchBar(props) {
|
||
|
|
return (
|
||
|
|
<Paper
|
||
|
|
component="form"
|
||
|
|
sx={{ display: 'flex', alignItems: 'center'}}
|
||
|
|
>
|
||
|
|
<InputBase
|
||
|
|
sx={{flex: 1 }}
|
||
|
|
placeholder="Search Catalog"
|
||
|
|
inputProps={{ 'aria-label': `search catalog` }}
|
||
|
|
/>
|
||
|
|
<IconButton type="submit" sx={{ p: '18px' }} aria-label="search">
|
||
|
|
<SearchIcon />
|
||
|
|
</IconButton>
|
||
|
|
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
|
||
|
|
<IconButton sx={{ p: '8px' }} aria-label="clear">
|
||
|
|
<ClearOutlinedIcon />
|
||
|
|
</IconButton>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
}
|