47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './chipSelector.styles';
|
|
|
|
interface Option {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface ChipSelectorProps {
|
|
options: Option[];
|
|
selected: string;
|
|
onChange: (value: any) => void;
|
|
}
|
|
|
|
export const ChipSelector: React.FC<ChipSelectorProps> = ({
|
|
options,
|
|
selected,
|
|
onChange,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{options.map((option) => {
|
|
const isActive = option.value === selected;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={option.value}
|
|
style={[styles.chip, isActive && styles.chipActive]}
|
|
activeOpacity={0.7}
|
|
onPress={() => onChange(option.value)}
|
|
>
|
|
<Text style={[styles.label, isActive && styles.labelActive]}>
|
|
{option.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
export default ChipSelector;
|