File size: 1,872 Bytes
41a71fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { classNames } from '@/shared/lib/classNames/classNames';
import cls from './RadioButtons.module.scss';
export enum RadioButtonsTheme {
PARAM = 'param',
}
export interface IRadioButtons {
labelName: string;
value: string | number;
}
interface RadioButtonsProps {
className?: string;
name: string;
title?: string;
data: IRadioButtons[];
theme?: string;
currentValue?: string | number;
onChange?: (value: string) => void;
}
export const RadioButtons = (props: RadioButtonsProps) => {
const { className, name, title, data, theme = '', currentValue, onChange } = props;
return (
<div className={classNames(cls.RadioButtons, {}, [className, cls[theme]])}>
{title && <p className={cls.listTitle}>{title}</p>}
<div className={cls.list}>
{data.map((radioButton, index) => (
<div key={`${name + (index + 1)}`} className={cls.item}>
<input
id={`${name + (index + 1)}`}
type="radio"
name={name}
value={radioButton.value}
className={`${cls.input} visually-hidden`}
checked={radioButton.value === currentValue}
onChange={(e) => onChange?.(e.target.value)}
/>
<label className={cls.name} htmlFor={`${name + (index + 1)}`}>
<span className={cls.window}>
<span className={cls.circle} />
</span>
<span className={cls.text}>{radioButton.labelName}</span>
</label>
</div>
))}
</div>
</div>
);
};
|