66 lines
No EOL
1.6 KiB
TypeScript
66 lines
No EOL
1.6 KiB
TypeScript
import { StyleSheet, Text, View, Pressable } from 'react-native'
|
|
import React from 'react'
|
|
import { Category } from '../../types/dbItems'
|
|
import CustomCard from './CustomCard';
|
|
import { SIZES } from '../../constants/theme';
|
|
import { useTheme } from '../../app/contexts/ThemeContext';
|
|
|
|
interface CategoryListItemProps{
|
|
category: Category;
|
|
onPress?: (category: Category) =>void | undefined
|
|
}
|
|
|
|
|
|
|
|
const CategoryListItem: React.FC<CategoryListItemProps> = (props: CategoryListItemProps) => {
|
|
const {category, onPress} = props;
|
|
const {colors} = useTheme();
|
|
|
|
const handlePress = ()=>{
|
|
if(onPress){
|
|
onPress(category);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Pressable onPress={handlePress}>
|
|
<View style={[styles.tile, {backgroundColor: colors.backgroundColor}]}>
|
|
<View style={[styles.colorTip, {backgroundColor: category.color}]}/>
|
|
<View style={[styles.textWrapper]}>
|
|
<Text style={[styles.text, {color: colors.primaryText}]}>{category.name ?? "#noData#"}</Text>
|
|
</View>
|
|
<View style={styles.tileTail}/>
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
export default CategoryListItem
|
|
|
|
const styles = StyleSheet.create({
|
|
tile: {
|
|
height: 60,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
borderRadius: 20
|
|
},
|
|
colorTip:{
|
|
height: "100%",
|
|
width: 30,
|
|
borderTopLeftRadius:20,
|
|
borderBottomLeftRadius: 20
|
|
},
|
|
textWrapper: {
|
|
|
|
},
|
|
tileTail:{
|
|
height: "100%",
|
|
width: 30,
|
|
borderTopRightRadius:20,
|
|
borderBottomRightRadius: 20
|
|
},
|
|
text: {
|
|
fontSize: SIZES.large,
|
|
}
|
|
}) |