50 lines
2.2 KiB
JavaScript
50 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { Image, Pressable, Text, View } from 'react-native';
|
|
import { STATUS_COLORS } from '../constants';
|
|
import { styles } from '../styles';
|
|
|
|
function statusAccent(status) {
|
|
return STATUS_COLORS[status] || '#64748b';
|
|
}
|
|
|
|
export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack }) {
|
|
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.itemMain}>
|
|
<View style={styles.cardRow}>
|
|
<View style={styles.flex}>
|
|
<Text style={styles.itemTitle}>{item.name}</Text>
|
|
<Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {item.status}</Text>
|
|
<Text style={styles.itemMeta}>Location: {item.placement}</Text>
|
|
{item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Lent to: {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>
|
|
|
|
{item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|