1  import { Trans } from '@lingui/macro';
 2  import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 3  import * as React from 'react';
 4  import { PageTitle } from 'src/components/TopInfoPanel/PageTitle';
 5  
 6  import { TopInfoPanel } from '../../components/TopInfoPanel/TopInfoPanel';
 7  
 8  export const BridgeTopPanel = () => {
 9    const { breakpoints } = useTheme();
10    const md = useMediaQuery(breakpoints.down('md'));
11    const xsm = useMediaQuery(breakpoints.down('xsm'));
12  
13    return (
14      <TopInfoPanel
15        pageTitle={<></>}
16        titleComponent={
17          <Box>
18            <Box sx={{ display: 'flex', alignItems: 'center' }}>
19              <Typography variant="h3" sx={{ color: '#A5A8B6' }}>
20                <Trans>Bridge history</Trans>
21              </Typography>
22            </Box>
23            <PageTitle withMarketSwitcher={false} />
24            <Box sx={{ width: md ? (xsm ? '320px' : '540px') : '860px' }} />
25          </Box>
26        }
27      />
28    );
29  };