Vojtech Simetka
a90b4c439b
* chore(deps): update react router from v5 to v6 * fix: correctly choose navigate target if there is no history
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
|
|
import { ReactElement } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { ROUTES } from '../../routes'
|
|
|
|
interface Props {
|
|
active: 'UPLOAD' | 'DOWNLOAD'
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
flexGrow: 1,
|
|
marginBottom: theme.spacing(4),
|
|
},
|
|
leftTab: {
|
|
marginRight: theme.spacing(0.5),
|
|
},
|
|
rightTab: {
|
|
marginLeft: theme.spacing(0.5),
|
|
},
|
|
}),
|
|
)
|
|
|
|
export function FileNavigation({ active }: Props): ReactElement {
|
|
const classes = useStyles()
|
|
const navigate = useNavigate()
|
|
|
|
function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
|
|
navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Tabs value={active === 'UPLOAD' ? 0 : 1} onChange={onChange} variant="fullWidth">
|
|
<Tab className={classes.leftTab} key="UPLOAD" label="Upload" />
|
|
<Tab className={classes.rightTab} key="DOWNLOAD" label="Download" />
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|