PliWould/components/UnitChooser.tsx

import { Length } from "convert";
import { useState } from "react";
import {
  Button,
  Pressable,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";

export type UnitChooserPropsBase = {
  onUnitSet?: (l: Length) => any;
  activeColor?: string;
  defaultColor?: string;
  defaultUnit?: Length;
};

export type UnitChooserProps = UnitChooserPropsBase & {
  choices: Length[];
};

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

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

  function doChoiceClicked(choice: Length) {
    setValue(choice);
    onUnitSet && onUnitSet(choice);
  }

  const activeColors = ['#a7caff', '#5588ff', '#5588ff', '#5588ff'];
  const inactiveColors = ['#d0d0d0', '#828282', '#828282', '#828282'];

  return (
    <View style={styles.unitChooser}>
      {choices.map((ci) => {
        return (
          <LinearGradient
            colors={ci === value ? activeColors : inactiveColors}
            style={styles.gradientButton}
          >
            <TouchableHighlight style={{padding: 5, borderRadius: 5, }} onPress={() => doChoiceClicked(ci)} key={ci}>
              <Text style={{padding: 5, fontSize: 16}}>{ci}</Text>
            </TouchableHighlight>
          </LinearGradient>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  gradientButton: {},
  unitChooser: {
    flexDirection: "row",
    verticalAlign: "middle",
    padding: 4,
  },
  textActive: {
    marginTop: 2,
    marginBottom: 2,
    marginLeft: 10,
    marginRight: 10,
    fontSize: 25,
  },
  textDefault: {
    marginTop: 2,
    marginBottom: 2,
    marginLeft: 10,
    marginRight: 10,
    fontSize: 25,
  },
  unitButton: {},
});