import React from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useHistory, useLocation } from 'react-router-dom'; import { Box, Typography } from '@material-ui/core'; import { ArrowForwardIos } from '@material-ui/icons'; import cx from 'classnames'; import Search from 'components/Search'; import { shortenAddress } from 'utils'; const useStyles = makeStyles(({ palette }) => ({ topTab: { height: 46, padding: '0 24px', borderRadius: 10, display: 'flex', alignItems: 'center', cursor: 'pointer', '& p': { color: palette.text.disabled, }, }, selectedTab: { background: palette.secondary.light, '& p': { color: palette.text.primary, }, }, link: { cursor: 'pointer', color: palette.text.secondary, '&:hover': { textDecoration: 'underline', }, }, })); interface AnalyticHeaderProps { data?: any; type?: string; } const AnalyticsHeader: React.FC<AnalyticHeaderProps> = ({ data, type }) => { const classes = useStyles(); const { palette } = useTheme(); const history = useHistory(); const { pathname } = useLocation(); return ( <Box width='100%' mb={3}> <Box mb={4}> <Typography variant='h4'>Quickswap Analytics</Typography> </Box> <Box mb={4} position='relative' display='flex' justifyContent='space-between' flexWrap='wrap' > <Box marginY={1.5} display='flex' alignItems='center'> {type && data && ( <Box display='flex' alignItems='center' color={palette.text.hint}> <Typography variant='caption' className={classes.link} onClick={() => { history.push('/analytics'); }} > Analytics </Typography> <ArrowForwardIos style={{ width: 16 }} /> <Typography variant='caption' className={classes.link} onClick={() => { history.push(`/analytics/${type}s`); }} > {type === 'token' ? 'Tokens' : 'Pairs'} </Typography> <ArrowForwardIos style={{ width: 16 }} /> <Typography variant='caption'> <span style={{ color: '#b6b9cc' }}> {type === 'token' ? data.symbol : `${data.token0.symbol}/${data.token1.symbol}`} </span> ({shortenAddress(data.id)}) </Typography> </Box> )} {!type && ( <> <Box className={cx( classes.topTab, pathname.indexOf('pair') === -1 && pathname.indexOf('token') === -1 && classes.selectedTab, )} onClick={() => history.push(`/analytics`)} > <Typography variant='body1'>Overview</Typography> </Box> <Box className={cx( classes.topTab, pathname.indexOf('token') > -1 && classes.selectedTab, )} onClick={() => history.push(`/analytics/tokens`)} > <Typography variant='body1'>Tokens</Typography> </Box> <Box className={cx( classes.topTab, pathname.indexOf('pair') > -1 && classes.selectedTab, )} onClick={() => history.push(`/analytics/pairs`)} > <Typography variant='body1'>Pairs</Typography> </Box> </> )} </Box> <Search /> </Box> </Box> ); }; export default AnalyticsHeader;