feat: Extend Apps page with search and data

packages/web/src/components/AppBar/index.tsx

@@ -4,20 +4,16 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
 
 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';
-import useFormatMessage from 'hooks/useFormatMessage';
-import { Search, SearchIconWrapper, InputBase } from './style';
+import SearchInput from 'components/SearchInput';
 
 type AppBarProps = {
   onMenuClick: () => void;
 };
 
 export default function AppBar({ onMenuClick }: AppBarProps) {
-  const formatMessage = useFormatMessage();
-
   return (
     <Box sx={{ flexGrow: 1 }}>
       <HideOnScroll>
@@ -41,19 +37,10 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
               component="div"
               sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
             >
-              <FormattedMessage id="automatisch" />
+              <FormattedMessage id="brandText" />
             </Typography>
 
-            <Search>
-              <SearchIconWrapper>
-                <SearchIcon />
-              </SearchIconWrapper>
-
-              <InputBase
-                placeholder={formatMessage('searchPlaceholder')}
-                inputProps={{ 'aria-label': 'search' }}
-              />
-            </Search>
+            <SearchInput />
           </Toolbar>
         </MuiAppBar>
       </HideOnScroll>

packages/web/src/components/AppBar/style.ts

@@ -1,44 +0,0 @@
-import { styled, alpha } from '@mui/material/styles';
-import MuiInputBase from '@mui/material/InputBase';
-
-export const Search = styled('div')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginLeft: 0,
-  width: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
-}));
-
-export const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const InputBase = styled(MuiInputBase)(({ theme }) => ({
-  color: 'inherit',
-  '& .MuiInputBase-input': {
-    padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create('width'),
-    width: '100%',
-    [theme.breakpoints.up('sm')]: {
-      width: '12ch',
-      '&:focus': {
-        width: '20ch',
-      },
-    },
-  },
-}));