35 lines
800 B
TypeScript
35 lines
800 B
TypeScript
|
import React from 'react'
|
||
|
|
import { Button } from './button'
|
||
|
|
import { Row } from './layout/row'
|
||
|
|
|
||
|
|
export function YesNoSelector(props: {
|
||
|
|
selected: 'yes' | 'no'
|
||
|
|
onSelect: (selected: 'yes' | 'no') => void
|
||
|
|
yesLabel?: string
|
||
|
|
noLabel?: string
|
||
|
|
className?: string
|
||
|
|
}) {
|
||
|
|
const { selected, onSelect, yesLabel, noLabel, className } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Row className={className}>
|
||
|
|
<Button
|
||
|
|
color={selected === 'yes' ? 'green' : 'deemphasized'}
|
||
|
|
hideFocusRing
|
||
|
|
onClick={() => onSelect('yes')}
|
||
|
|
>
|
||
|
|
{yesLabel ?? 'Yes'}
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
color={selected === 'no' ? 'red' : 'deemphasized'}
|
||
|
|
hideFocusRing
|
||
|
|
onClick={() => onSelect('no')}
|
||
|
|
className="ml-3"
|
||
|
|
>
|
||
|
|
{noLabel ?? 'No'}
|
||
|
|
</Button>
|
||
|
|
</Row>
|
||
|
|
)
|
||
|
|
}
|