48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
|
|
import { H4 } from 'src/components/typography'
|
|
|
|
import styles from './SystemPerformance.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
const ranges = ['Month', 'Week', 'Day']
|
|
|
|
const Nav = ({ handleSetRange }) => {
|
|
const classes = useStyles()
|
|
const [clickedItem, setClickedItem] = useState('Day')
|
|
|
|
const isSelected = R.equals(clickedItem)
|
|
const handleClick = range => {
|
|
setClickedItem(range)
|
|
handleSetRange(range)
|
|
}
|
|
|
|
return (
|
|
<div className={classnames(classes.titleWrapper)}>
|
|
<div className={classes.titleAndButtonsContainer}>
|
|
<H4 className={classes.h4}>{'System performance'}</H4>
|
|
</div>
|
|
<div className={classes.navContainer}>
|
|
{ranges.map((it, idx) => {
|
|
return (
|
|
<div
|
|
key={idx}
|
|
onClick={e => handleClick(e.target.innerText)}
|
|
className={
|
|
isSelected(it)
|
|
? classnames(classes.newHighlightedLabel, classes.navButton)
|
|
: classnames(classes.label, classes.navButton)
|
|
}>
|
|
{it}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Nav
|