48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { VisuallyHidden, Radio, RadioGroup, useRadioStore } from '@ariakit/react'
|
|
import { classNames } from '@standardnotes/utils'
|
|
|
|
type Props<Value extends string> = {
|
|
items: { label: string; value: Value }[]
|
|
value: Value
|
|
onChange: (value: Value) => void
|
|
className?: string
|
|
}
|
|
|
|
function RadioButtonGroup<Value extends string>({ value, items, onChange, className }: Props<Value>) {
|
|
const radio = useRadioStore({
|
|
value,
|
|
orientation: 'horizontal',
|
|
setValue(value) {
|
|
onChange(value as Value)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<RadioGroup
|
|
store={radio}
|
|
className={`flex divide-x divide-border rounded border border-border md:translucent-ui:border-[--popover-border-color] ${
|
|
className ?? ''
|
|
}`}
|
|
>
|
|
{items.map(({ label, value: itemValue }) => (
|
|
<label
|
|
className={classNames(
|
|
'flex-grow select-none px-3.5 py-1.5 text-center',
|
|
'first:rounded-bl first:rounded-tl last:rounded-br last:rounded-tr',
|
|
itemValue === value &&
|
|
'bg-info-backdrop font-medium text-info ring-1 ring-inset ring-info focus-within:ring-2',
|
|
)}
|
|
key={itemValue}
|
|
>
|
|
<VisuallyHidden>
|
|
<Radio value={itemValue} />
|
|
</VisuallyHidden>
|
|
{label}
|
|
</label>
|
|
))}
|
|
</RadioGroup>
|
|
)
|
|
}
|
|
|
|
export default RadioButtonGroup
|