41 lines
964 B
TypeScript
41 lines
964 B
TypeScript
import Button from '@shared/atoms/Button'
|
|
import React, {
|
|
ChangeEvent,
|
|
Dispatch,
|
|
ReactElement,
|
|
SetStateAction
|
|
} from 'react'
|
|
import styles from './Nav.module.css'
|
|
import { graphTypes, GraphType } from './_constants'
|
|
|
|
export default function Nav({
|
|
graphType,
|
|
setGraphType
|
|
}: {
|
|
graphType: GraphType
|
|
setGraphType: Dispatch<SetStateAction<GraphType>>
|
|
}): ReactElement {
|
|
function handleGraphTypeSwitch(e: ChangeEvent<HTMLButtonElement>) {
|
|
e.preventDefault()
|
|
setGraphType(e.currentTarget.textContent.toLowerCase() as GraphType)
|
|
}
|
|
|
|
return (
|
|
<nav className={styles.type}>
|
|
{graphTypes.map((type: GraphType) => (
|
|
<Button
|
|
key={type}
|
|
style="text"
|
|
size="small"
|
|
onClick={handleGraphTypeSwitch}
|
|
className={`${styles.button} ${
|
|
graphType === type.toLowerCase() ? styles.active : null
|
|
}`}
|
|
>
|
|
{type}
|
|
</Button>
|
|
))}
|
|
</nav>
|
|
)
|
|
}
|