TemperatureUnitToggle.tsx

export interface TemperatureUnitToggleProps {
    selectedUnit: TemperatureUnit;
    onChange: (temperatureUnit: TemperatureUnit) => void;
}

/**
 * A toggle component to swap between Celsius and Fahrenheit
 */
export const TemperatureUnitToggle: FunctionComponent<TemperatureUnitToggleProps> = ({ selectedUnit, onChange }) => {
    const isCelsiusSelected = selectedUnit === TemperatureUnit.Celsius;
    return (
        <button
            className={styles.toggleButton}
            onClick={() => onChange(isCelsiusSelected ? TemperatureUnit.Fahrenheit : TemperatureUnit.Celsius)}
        >
            <span
                className={classNames(styles.celsius, {
                    [dashboardStyles.semiBold]: isCelsiusSelected,
                    [styles.deemphasized]: !isCelsiusSelected,
                })}
            >
                °C
            </span>
            <span
                className={classNames({
                    [dashboardStyles.semiBold]: !isCelsiusSelected,
                    [styles.deemphasized]: isCelsiusSelected,
                })}
            >
                °F
            </span>
        </button>
    );
};