pashto-inflector/src/components/ButtonSelect.tsx

/**
 * Copyright (c) 2021 lingdocs.com
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import classNames from "classnames";

type PickerProps = {
    options: { label: any, value: string, color?: string }[],
    value: string,
    handleChange: (payload: string) => void,
    small?: boolean,
    xSmall?: boolean,
}

function ButtonSelect(props: PickerProps) {
    return (
        <div className="d-inline-flex flex-row justify-content-center">
            <div className="btn-group">
                {props.options.map((option) => (
                    <button
                        key={option.value}
                        type="button"
                        className={classNames(
                            "btn",
                            "btn-outline-secondary",
                            { active: props.value === option.value },
                            { "btn-sm": props.small || props.xSmall }
                        )}
                        onClick={() => props.handleChange(option.value)}
                        style={props.xSmall ? {
                            fontSize: "small",
                            ...option.color ? 
                                { background: option.color } : {},
                        } : {}}
                    >
                        {option.label}
                    </button>
                ))}
            </div>
        </div>
    );
}

export default ButtonSelect;