62 lines
2.6 KiB
JavaScript
62 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Image, Pressable, Text, View } from 'react-native';
|
|
import { STATUS_COLORS } from '../constants';
|
|
import { styles } from '../styles';
|
|
import { formatStatusLabel } from '../utils/labels';
|
|
|
|
function statusAccent(status) {
|
|
return STATUS_COLORS[status] || '#64748b';
|
|
}
|
|
|
|
export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack, onOpenImage }) {
|
|
const isPacked = item.status === 'packed';
|
|
const isUnpacked = item.status === 'unpacked';
|
|
|
|
return (
|
|
<View style={styles.itemCard}>
|
|
<View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
|
|
|
|
<View style={styles.itemThumbWrap}>
|
|
{item.imageUri ? (
|
|
<Pressable onPress={() => onOpenImage?.(item.imageUri)}>
|
|
<Image source={{ uri: item.imageUri }} style={styles.itemThumbSmall} />
|
|
</Pressable>
|
|
) : (
|
|
<View style={styles.itemThumbPlaceholder}>
|
|
<Text style={styles.itemThumbPlaceholderText}>🧳</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.itemMain}>
|
|
<View style={styles.cardRow}>
|
|
<View style={styles.flex}>
|
|
<Text style={styles.itemTitle}>{item.name}</Text>
|
|
<Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
|
|
<Text style={styles.itemMeta}>Location: {item.placement}</Text>
|
|
{item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Borrower: {item.lentTo}</Text> : null}
|
|
{!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
|
|
</View>
|
|
<View style={styles.stackButtons}>
|
|
<Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
|
|
<Text style={styles.miniBtnText}>Edit</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.miniBtnDanger} onPress={() => onDelete(item.id)}>
|
|
<Text style={styles.miniBtnText}>Delete</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.quickStatusRow}>
|
|
<Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
|
|
<Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Pack</Text>
|
|
</Pressable>
|
|
<Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
|
|
<Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|