feat: add new theme berry (#860)

* feat: add theme berry

* docs: add development notes

* fix: fix blank page

* chore: update implementation

* fix: fix package.json

* chore: update ui copy

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/berry/src/ui-component/TableToolBar.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+
+import Toolbar from '@mui/material/Toolbar';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { useTheme } from '@mui/material/styles';
+import { IconSearch } from '@tabler/icons-react';
+
+// ----------------------------------------------------------------------
+
+export default function TableToolBar({ filterName, handleFilterName, placeholder }) {
+  const theme = useTheme();
+  const grey500 = theme.palette.grey[500];
+
+  return (
+    <Toolbar
+      sx={{
+        height: 80,
+        display: 'flex',
+        justifyContent: 'space-between',
+        p: (theme) => theme.spacing(0, 1, 0, 3)
+      }}
+    >
+      <OutlinedInput
+        id="keyword"
+        sx={{
+          minWidth: '100%'
+        }}
+        value={filterName}
+        onChange={handleFilterName}
+        placeholder={placeholder}
+        startAdornment={
+          <InputAdornment position="start">
+            <IconSearch stroke={1.5} size="20px" color={grey500} />
+          </InputAdornment>
+        }
+      />
+    </Toolbar>
+  );
+}
+
+TableToolBar.propTypes = {
+  filterName: PropTypes.string,
+  handleFilterName: PropTypes.func,
+  placeholder: PropTypes.string
+};