chips component

 import React from "react";

import { TouchableOpacity, Text, StyleSheet, GestureResponderEvent, View } from "react-native";

import { THEME_COLORS } from "@/constants/contants";

import { white } from "@/constants/theme";

import { ChipProps } from "@ebh/capsule";

const Chip: React.FC<ChipProps> = ({ active = false, onClick, children }) => {

// const handlePress = (event: GestureResponderEvent) => {

// if (onClick) {

// onClick(event as unknown as any);

// }

// };

return (

<View style={styles.chipWrapper}>

<TouchableOpacity

style={[styles.chipContainer, active ? styles.activeChip : styles.inactiveChip]}

// onPress={handlePress}

>

<Text style={[styles.chipText, active ? styles.activeText : styles.inactiveText]}>

{children}

</Text>

</TouchableOpacity>

</View>

);

};

const styles = StyleSheet.create({

chipWrapper: {

flexDirection: "row",

alignItems: "center",

justifyContent: "flex-start",

paddingHorizontal: 10,

// marginBottom: 8,

},

chipContainer: {

paddingVertical: 6,

paddingHorizontal: 12,

borderRadius: 6,

borderWidth: 1,

alignSelf: "flex-start",

},

activeChip: {

backgroundColor: THEME_COLORS["primary-100"],

borderColor: THEME_COLORS["primary-500"],

},

inactiveChip: {

backgroundColor:white,

borderColor: THEME_COLORS["gray-400"],

},

chipText: {

fontSize: 12,

fontWeight: "400",

},

activeText: {

color:THEME_COLORS["primary-400"],

},

inactiveText: {

color: THEME_COLORS["gray-600"],

},

});

export default Chip;