query panel is ready to use

pages/index.tsx

@@ -4,8 +4,6 @@ import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-import InputBase from '@mui/material/InputBase'
-import SearchIcon from '@mui/icons-material/Search'
 import Paper from '@mui/material/Paper'
 import Grid from '@mui/material/Grid'
 import Avatar from '@mui/material/Avatar'
@@ -20,8 +18,9 @@ import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
 import Link from 'next/link'
+import QueryPanel from 'src/components/header/QueryPanel'
 
-const info = ('This is the FDO Manager. The hardware and infrastructure for this test instance are provided by GWDG. IndiScale is responsible for the architecture and implementation.')
+const info = ('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.')
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -31,48 +30,6 @@ const Item = styled(Paper)(({ theme }) => ({
   color: theme.palette.text.secondary
 }))
 
-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: '250px'
-  }
-}))
-
-const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}))
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  color: 'inherit',
-  width: '100%',
-  '& .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'),
-    [theme.breakpoints.up('sm')]: {
-      width: '12ch',
-      '&:focus': {
-        width: '20ch'
-      }
-    }
-  }
-}))
-
 export default function Index () {
   const { mode, setMode } = useContext(ColorModeContext)
   const { locale: currentLocale, locales, pathname, query } = useRouter()
@@ -92,16 +49,15 @@ export default function Index () {
             FDO MANAGER
           </Typography>
 
-          <Search>
-            <SearchIconWrapper>
-              <SearchIcon />
-            </SearchIconWrapper>
-            <StyledInputBase
-              placeholder="Search…"
-              inputProps={{ 'aria-label': 'search' }}
-            />
-          </Search>
-          <Stack marginLeft={3}>
+          <Stack
+            direction="row"
+            width="80%"
+            justifyContent="flex-end"
+            alignItems="center"
+            gap="14px"
+          >
+          <QueryPanel/>
+
           <FormControl sx={{ minWidth: 64 }}>
               <Select
                 disableUnderline
@@ -132,23 +88,9 @@ export default function Index () {
                     defaultValue={lang}
                     value={lang}
                   >
-                    <Stack
-                      direction="row"
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <Avatar
-                        sx={{
-                          width: '24px',
-                          height: '24px',
-                          marginRight: '5px'
-                        }}
-                        src={`/images/flags/${lang}.svg`}
-                      />
                       <Typography>
                         {lang === 'en' ? 'English' : 'German'}
                       </Typography>
-                    </Stack>
                   </MenuItem>
                 ))}
               </Select>
@@ -169,8 +111,10 @@ export default function Index () {
       </AppBar>
 
       <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
-        <Grid item xs={6}>
-          <Item><h1>Projektinfo mit Atomgrafik</h1>{info}<br/>{info}<br/>{info}<br/>{info}<br/></Item>
+       <Grid item xs={6}>
+          <Item><h1>Projektinfo mit Atomgrafik</h1></Item>
+          <Item>{info}<br/></Item>
+          <Item>Hallo</Item>
         </Grid>
       </Grid>
 

src/components/header/index.tsx

@@ -2,7 +2,6 @@ import { ColorModeContext } from '@contexts'
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
 import AppBar from '@mui/material/AppBar'
-import Avatar from '@mui/material/Avatar'
 import FormControl from '@mui/material/FormControl'
 import IconButton from '@mui/material/IconButton'
 import MenuItem from '@mui/material/MenuItem'
@@ -75,14 +74,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
                       alignItems="center"
                       justifyContent="center"
                     >
-                      <Avatar
-                        sx={{
-                          width: '24px',
-                          height: '24px',
-                          marginRight: '5px'
-                        }}
-                        src={`/images/flags/${lang}.svg`}
-                      />
                       <Typography>
                         {lang === 'en' ? 'English' : 'German'}
                       </Typography>