Cafe137
41432bc346
* feat: add account tabs * chore: bump * refactor: change network tab for old accounting * feat: new fonts and text transformation, chequebook tab * feat: polishing
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
|
|
import { ReactElement } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { ACCOUNT_TABS } from '../../routes'
|
|
|
|
const tabMap = {
|
|
WALLET: 0,
|
|
CHEQUEBOOK: 1,
|
|
STAMPS: 2,
|
|
FEEDS: 3,
|
|
}
|
|
|
|
interface Props {
|
|
active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
flexGrow: 1,
|
|
marginBottom: theme.spacing(4),
|
|
textTransform: 'none',
|
|
},
|
|
leftTab: {
|
|
marginRight: theme.spacing(0.125),
|
|
},
|
|
centerTab: {
|
|
marginLeft: theme.spacing(0.125),
|
|
marginRight: theme.spacing(0.125),
|
|
},
|
|
rightTab: {
|
|
marginLeft: theme.spacing(0.125),
|
|
},
|
|
}),
|
|
)
|
|
|
|
export function AccountNavigation({ active }: Props): ReactElement {
|
|
const classes = useStyles()
|
|
const navigate = useNavigate()
|
|
|
|
function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
|
|
navigate(ACCOUNT_TABS[newValue])
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
|
|
<Tab className={classes.leftTab} key="WALLET" label="Wallet" />
|
|
<Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
|
|
<Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
|
|
<Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|