ButtonSelect.tsx 657 B

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