58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
|
import { Picker } from "@react-native-picker/picker";
|
||
|
|
import React from "react";
|
||
|
|
import { StyleSheet, Text, View } from "react-native";
|
||
|
|
import { COLORS, BORDER_RADIUS, SPACING } from "@/constants/theme";
|
||
|
|
|
||
|
|
type SelectProps = {
|
||
|
|
label?: string;
|
||
|
|
value: string;
|
||
|
|
onValueChange: (value: string) => void;
|
||
|
|
items: { label: string; value: string }[];
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Select({ label, value, onValueChange, items }: SelectProps) {
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
{label && <Text style={styles.label}>{label}</Text>}
|
||
|
|
<View style={styles.pickerContainer}>
|
||
|
|
<Picker
|
||
|
|
selectedValue={value}
|
||
|
|
onValueChange={onValueChange}
|
||
|
|
style={styles.picker}
|
||
|
|
>
|
||
|
|
{items.map((item) => (
|
||
|
|
<Picker.Item
|
||
|
|
key={item.value}
|
||
|
|
label={item.label}
|
||
|
|
value={item.value}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</Picker>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
width: "100%",
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: COLORS.text,
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: "600",
|
||
|
|
marginBottom: SPACING.sm,
|
||
|
|
},
|
||
|
|
pickerContainer: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: COLORS.inputBorder,
|
||
|
|
backgroundColor: COLORS.inputBackground,
|
||
|
|
borderRadius: BORDER_RADIUS.md,
|
||
|
|
overflow: "hidden",
|
||
|
|
},
|
||
|
|
picker: {
|
||
|
|
height: 48,
|
||
|
|
color: COLORS.inputText,
|
||
|
|
},
|
||
|
|
});
|