Savepoint

src/views/components/CatalogSearch.jsx

@@ -0,0 +1,31 @@
+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>
+  );
+}