ButtonSelect.tsx 630 B

123456789101112131415161718192021222324252627282930
  1. import clsx from "clsx";
  2. export const ButtonSelect = <T extends Object>({
  3. options,
  4. value,
  5. onChange,
  6. group,
  7. }: {
  8. options: { value: T; text: string }[];
  9. value: T | null;
  10. onChange: (value: T) => void;
  11. group: string;
  12. }) => (
  13. <div className="buttonList">
  14. {options.map((option) => (
  15. <label
  16. key={option.text}
  17. className={clsx({ active: value === option.value })}
  18. >
  19. <input
  20. type="radio"
  21. name={group}
  22. onChange={() => onChange(option.value)}
  23. checked={value === option.value}
  24. />
  25. {option.text}
  26. </label>
  27. ))}
  28. </div>
  29. );