chore(react/settings): fix a margin between radios

This commit is contained in:
Elian Doran
2025-08-15 00:19:37 +03:00
parent 520effbbb7
commit c039f06c2b
3 changed files with 36 additions and 49 deletions

View File

@@ -11,23 +11,37 @@ interface FormRadioProps {
onChange(newValue: string): void;
}
export default function FormRadioGroup({ name, values, currentValue, onChange }: FormRadioProps) {
export default function FormRadioGroup({ values, ...restProps }: FormRadioProps) {
return (
<>
{(values || []).map(({ value, label }) => (
<div className="form-checkbox">
<label className="form-check-label tn-radio">
<input
className="form-check-input"
type="radio"
name={useUniqueName(name)}
value={value}
checked={value === currentValue}
onChange={e => onChange((e.target as HTMLInputElement).value)} />
{label}
</label>
<FormRadio value={value} label={label} {...restProps} labelClassName="form-check-label" />
</div>
))}
</>
);
}
export function FormInlineRadioGroup({ values, ...restProps }: FormRadioProps) {
return (
<>
{values.map(({ value, label }) => (<FormRadio value={value} label={label} {...restProps} />))}
</>
)
}
function FormRadio({ name, value, label, currentValue, onChange, labelClassName }: Omit<FormRadioProps, "values"> & { value: string, label: ComponentChildren, labelClassName?: string }) {
return (
<label className={`tn-radio ${labelClassName ?? ""}`}>
<input
className="form-check-input"
type="radio"
name={useUniqueName(name)}
value={value}
checked={value === currentValue}
onChange={e => onChange((e.target as HTMLInputElement).value)} />
{label}
</label>
)
}