Initial commit for Greenlens

components/PlantCard.tsx

@@ -1,59 +1,102 @@
 import React from 'react';
-import { Plant } from '../types';
-import { Droplets } from 'lucide-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: Plant;
-  onClick: () => void;
-  t: any; // Using any for simplicity with the dynamic translation object
+  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, onClick, t }) => {
-  const daysUntilWatering = plant.careInfo.waterIntervalDays; 
-  // Very basic check logic for MVP
-  const isUrgent = daysUntilWatering <= 1;
-
-  const wateringText = isUrgent 
-    ? t.waterToday 
-    : t.inXDays.replace('{0}', daysUntilWatering.toString());
+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 (
-    <button 
-      onClick={onClick}
-      className="relative aspect-[4/5] rounded-2xl overflow-hidden shadow-md group active:scale-[0.98] transition-transform w-full text-left"
+    <TouchableOpacity
+      style={[styles.container, { width, shadowColor: colors.overlayStrong }]}
+      activeOpacity={0.9}
+      onPress={onPress}
     >
-      <img 
-        src={plant.imageUri} 
-        alt={plant.name} 
-        className="w-full h-full object-cover"
-      />
-      
-      {/* Gradient Overlay */}
-      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent" />
-      
+      <SafeImage uri={plant.imageUri} style={styles.image} />
+      <View style={[styles.gradient, { backgroundColor: colors.overlay }]} />
+
       {/* Badge */}
-      <div className="absolute top-3 left-3">
-        <div className={`flex items-center space-x-1.5 px-2.5 py-1 rounded-full backdrop-blur-md ${
-          isUrgent 
-            ? 'bg-orange-500 text-white' 
-            : 'bg-black/40 text-stone-200 border border-white/10'
-        }`}>
-          <Droplets size={10} className="fill-current" />
-          <span className="text-[10px] font-bold">
-            {wateringText}
-          </span>
-        </div>
-      </div>
+      <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 */}
-      <div className="absolute bottom-4 left-3 right-3">
-        <h3 className="text-white font-bold text-lg leading-tight font-serif mb-0.5 shadow-sm">
-          {plant.name}
-        </h3>
-        <p className="text-stone-300 text-xs truncate">
-          {plant.botanicalName}
-        </p>
-      </div>
-    </button>
+      <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 },
+});