hensei-web/components/common/SegmentedControl/index.tsx

46 lines
828 B
TypeScript

import React from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
interface Props {
className?: string
elementClass?: string
blended?: boolean
grow?: boolean
gap?: boolean
tabIndex?: number
}
const SegmentedControl: React.FC<Props> = ({
className,
elementClass,
blended,
grow,
gap,
tabIndex,
children,
}) => {
const classes = classNames(
{
[styles.segmentedControl]: true,
[styles.blended]: blended,
[styles.grow]: grow,
[styles.gap]: gap,
},
className,
elementClass
)
return (
<div className={styles.wrapper} tabIndex={tabIndex}>
<div className={classes}>{children}</div>
</div>
)
}
SegmentedControl.defaultProps = {
blended: false,
grow: false,
gap: false,
}
export default SegmentedControl