export default()

in src/frontend/src/components/selection/ImageSourceToggleSelection.tsx [31:63]

• 31 lines of code
• 3 McCabe index (conditional complexity)

export default ({ onChange }: Props) => {
  const [selectedOptions, setSelectedFeature] = useState<ImageSource>(
    Object.values(OPTION_TO_LABEL_MAP)[0]
  );

  const handleSelection = (newSelection: ImageSource) => {
    if (newSelection !== null) {
      setSelectedFeature(newSelection);
      onChange(newSelection);
    }
  };

  return (
    <div className="btn-group">
      {Object.entries(OPTION_TO_LABEL_MAP).map(([label, value]) => (
        <button
          data-testid={`button-${value}`}
          key={value}
          onClick={() => handleSelection(value)}
          aria-label={label}
          className={clsx(
            "btn",
            selectedOptions === value
              ? "btn-primary border-primary-focus"
              : "bg-gray-200 border-gray-400 text-gray-500 hover:border-primary hover:bg-primary hover:bg-opacity-25"
          )}
        >
          {label}
        </button>
      ))}
    </div>
  );
};