42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import classnames from 'classnames'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
import { H4 } from 'src/components/typography'
|
|
|
|
const ranges = ['Month', 'Week', 'Day']
|
|
|
|
const Nav = ({ handleSetRange, showPicker }) => {
|
|
const [clickedItem, setClickedItem] = useState('Day')
|
|
|
|
const isSelected = R.equals(clickedItem)
|
|
const handleClick = range => {
|
|
setClickedItem(range)
|
|
handleSetRange(range)
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-between items-center">
|
|
<H4 noMargin>{'System performance'}</H4>
|
|
{showPicker && (
|
|
<div className="flex gap-6">
|
|
{ranges.map((it, idx) => {
|
|
return (
|
|
<div
|
|
key={idx}
|
|
onClick={e => handleClick(e.target.innerText)}
|
|
className={classnames({
|
|
'cursor-pointer text-comet': true,
|
|
'font-bold text-zodiac border-b-zodiac border-b-2':
|
|
isSelected(it)
|
|
})}>
|
|
{it}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Nav
|