103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { ColorPalette } from '../types';
|
|
import { useColors } from '../constants/Colors';
|
|
import { SafeImage } from './SafeImage';
|
|
|
|
interface PlantCardProps {
|
|
plant: {
|
|
name: string;
|
|
botanicalName?: string;
|
|
imageUri: string;
|
|
careInfo: {
|
|
waterIntervalDays: number;
|
|
};
|
|
};
|
|
width: number;
|
|
onPress: () => void;
|
|
t: any;
|
|
isDark: boolean;
|
|
colorPalette: ColorPalette;
|
|
}
|
|
|
|
export const PlantCard: React.FC<PlantCardProps> = ({
|
|
plant,
|
|
width,
|
|
onPress,
|
|
t,
|
|
isDark,
|
|
colorPalette,
|
|
}) => {
|
|
const colors = useColors(isDark, colorPalette);
|
|
const isUrgent = plant.careInfo?.waterIntervalDays <= 1;
|
|
const wateringText = plant.careInfo?.waterIntervalDays
|
|
? (isUrgent
|
|
? t.waterToday
|
|
: t.inXDays.replace('{0}', plant.careInfo.waterIntervalDays.toString()))
|
|
: t.showDetails; // Default for lexicon entries
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.container, { width, shadowColor: colors.overlayStrong }]}
|
|
activeOpacity={0.9}
|
|
onPress={onPress}
|
|
>
|
|
<SafeImage uri={plant.imageUri} style={styles.image} />
|
|
<View style={[styles.gradient, { backgroundColor: colors.overlay }]} />
|
|
|
|
{/* Badge */}
|
|
<View
|
|
style={[
|
|
styles.badge,
|
|
isUrgent
|
|
? { backgroundColor: colors.warning }
|
|
: { backgroundColor: colors.overlayStrong, borderWidth: 1, borderColor: colors.heroButtonBorder },
|
|
]}
|
|
>
|
|
<Ionicons name="water" size={10} color={colors.iconOnImage} />
|
|
<Text style={[styles.badgeText, { color: colors.iconOnImage }]}>{wateringText}</Text>
|
|
</View>
|
|
|
|
{/* Content */}
|
|
<View style={styles.content}>
|
|
<Text style={[styles.name, { color: colors.textOnImage }]} numberOfLines={1}>{plant.name}</Text>
|
|
<Text style={[styles.botanical, { color: colors.heroButton }]} numberOfLines={1}>{plant.botanicalName}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
aspectRatio: 0.8,
|
|
borderRadius: 18,
|
|
overflow: 'hidden',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 6,
|
|
elevation: 4,
|
|
},
|
|
image: { width: '100%', height: '100%', resizeMode: 'cover' },
|
|
gradient: {
|
|
...StyleSheet.absoluteFillObject,
|
|
opacity: 0.8,
|
|
},
|
|
badge: {
|
|
position: 'absolute',
|
|
top: 10,
|
|
left: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
badgeText: { fontSize: 9, fontWeight: '700' },
|
|
content: { position: 'absolute', bottom: 14, left: 10, right: 10 },
|
|
name: { fontSize: 16, fontWeight: '700' },
|
|
botanical: { fontSize: 11 },
|
|
});
|