66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import React from 'react';
|
|
import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
|
import { QuickChip } from './types';
|
|
|
|
interface QuickChipsProps {
|
|
chips: QuickChip[];
|
|
}
|
|
|
|
const QuickChips: React.FC<QuickChipsProps> = ({ chips }) => {
|
|
const colorScheme = useColorScheme();
|
|
const theme = Colors[colorScheme ?? 'light'];
|
|
|
|
return (
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.chipsRowScroll}
|
|
contentContainerStyle={styles.chipsRow}
|
|
>
|
|
{chips.map((chip) => (
|
|
<TouchableOpacity
|
|
key={chip.key}
|
|
style={[
|
|
styles.chip,
|
|
{
|
|
borderColor: theme.primary,
|
|
backgroundColor: 'transparent',
|
|
}
|
|
]}
|
|
onPress={chip.action}
|
|
>
|
|
<Text style={[styles.chipText, { color: theme.primary }]}>
|
|
{chip.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
chipsRowScroll: {
|
|
marginBottom: 8,
|
|
},
|
|
chipsRow: {
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
paddingHorizontal: 6,
|
|
},
|
|
chip: {
|
|
paddingHorizontal: 10,
|
|
height: 34,
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
chipText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default QuickChips; |