1  import { Box, Container, ContainerProps } from '@mui/material';
 2  import { ReactNode } from 'react';
 3  
 4  import { PageTitle, PageTitleProps } from './PageTitle';
 5  
 6  interface TopInfoPanelProps extends PageTitleProps {
 7    children?: ReactNode;
 8    titleComponent?: ReactNode;
 9    containerProps?: ContainerProps;
10  }
11  
12  export const TopInfoPanel = ({
13    pageTitle,
14    titleComponent,
15    withMarketSwitcher,
16    withMigrateButton,
17    bridge,
18    children,
19    containerProps = {},
20  }: TopInfoPanelProps) => {
21    return (
22      <Box
23        sx={{
24          bgcolor: 'background.header',
25          pt: { xs: 10, md: 12 },
26          pb: { xs: 18, md: 20, lg: '94px', xl: '92px', xxl: '96px' },
27          color: '#F1F1F3',
28        }}
29      >
30        <Container {...containerProps} sx={{ ...containerProps.sx, pb: 0 }}>
31          <Box sx={{ px: { xs: 4, xsm: 6 } }}>
32            {!titleComponent && (
33              <PageTitle
34                pageTitle={pageTitle}
35                withMarketSwitcher={withMarketSwitcher}
36                withMigrateButton={withMigrateButton}
37                bridge={bridge}
38              />
39            )}
40  
41            {titleComponent && titleComponent}
42  
43            <Box
44              sx={{
45                display: 'flex',
46                alignItems: 'flex-start',
47                gap: { xs: 3, xsm: 8 },
48                flexWrap: 'wrap',
49                width: '100%',
50              }}
51            >
52              {children}
53            </Box>
54          </Box>
55        </Container>
56      </Box>
57    );
58  };