Launch

components/PlantCard.tsx

@@ -1,102 +1,102 @@
-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 },
-});
+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 },
+});