user settings, points slider

components/shared/PointsSlider.tsx

@@ -0,0 +1,43 @@
+import { View, Text, Slider, TextField } from "react-native-ui-lib";
+import React from "react";
+
+const PointsSlider = (props: {
+  points: number;
+  setPoints(value: number): void;
+  handleChange(value: string): void;
+}) => {
+  return (
+    <View marginH-30 row spread>
+      <View width={"80%"}>
+        <Slider
+          value={props.points}
+          onValueChange={(value) => props.setPoints(value)}
+          minimumValue={0}
+          step={10}
+          maximumValue={100}
+        />
+        <View row spread>
+          <Text>0</Text>
+          <Text>50</Text>
+          <Text>100</Text>
+        </View>
+      </View>
+      <View style={{ marginLeft: "auto" }}>
+        <TextField
+          value={props.points.toString()}
+          onChangeText={(text) => {
+            props.handleChange(text);
+          }}
+          containerStyle={{
+            borderWidth: 1,
+            borderColor: "#d9d9d9",
+            width: 45,
+            borderRadius: 5,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default PointsSlider;