PliWould/components/UnitChooser.tsx

import { Length } from "convert";
import { useState } from "react";
import { Button, StyleSheet, View } from "react-native";

export type UnitChooserProps = {
    choices: Length[],
    onChoicePressed: (l: Length) => any,
    activeColor?: string,
    defaultColor?: string,
}

export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor }: UnitChooserProps) {
    const [value, setValue] = useState(choices[0] as Length);

    activeColor = activeColor || "lightblue";
    defaultColor = defaultColor || "lightgrey";

    function doChoiceClicked(choice: Length) {
        setValue(choice);
        onChoicePressed(choice);
    }

    return (
        <View style={styles.unitChooser}>
            {choices.map((ci) => {
                return (
                    <Button
                        title={ci}
                        onPress={() => doChoiceClicked(ci)}
                        color={value === ci ? activeColor : defaultColor}
                    />
                )
            })
            }
        </View>
    )
}

const styles = StyleSheet.create({
    unitChooser: {

    },
    active: {

    },
    default: {

    }
})