Ichitux
132 lines
3.5 KiB
TypeScript
132 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useThemeContext } from './ThemeProvider';
|
|
import { spacing, borderRadius } from '../constants/theme';
|
|
import { StockBadge } from './StockBadge';
|
|
import { Medicine } from '../types';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
interface MedicineCardProps {
|
|
medicine: Medicine;
|
|
}
|
|
|
|
export function MedicineCard({ medicine }: MedicineCardProps) {
|
|
const router = useRouter();
|
|
const { width } = useWindowDimensions();
|
|
const isTablet = width >= TABLET_MIN_WIDTH;
|
|
const { colors } = useThemeContext();
|
|
|
|
const handlePress = () => {
|
|
router.push(`/medicine/${medicine.nregistro}`);
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.card }]}
|
|
onPress={handlePress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.header}>
|
|
<Text style={[styles.name, isTablet && styles.nameTablet, { color: colors.text }]} numberOfLines={2}>
|
|
{medicine.name}
|
|
</Text>
|
|
{medicine.stock != null && <StockBadge stock={medicine.stock} />}
|
|
</View>
|
|
|
|
<Text style={[styles.principioActivo, { color: colors.textSecondary }]} numberOfLines={1}>
|
|
{medicine.active_ingredient}{medicine.dosage ? ` - ${medicine.dosage}` : ''}
|
|
</Text>
|
|
|
|
<View style={styles.footer}>
|
|
<View style={styles.priceContainer}>
|
|
<Ionicons name="pricetag" size={14} color={colors.textSecondary} />
|
|
<Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
|
|
{medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.labContainer}>
|
|
<Ionicons name="business" size={14} color={colors.textSecondary} />
|
|
<Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet, { color: colors.textSecondary }]} numberOfLines={1}>
|
|
{medicine.laboratory}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
borderRadius: borderRadius.lg,
|
|
padding: spacing.md,
|
|
marginHorizontal: spacing.lg,
|
|
marginVertical: spacing.xs,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
},
|
|
cardTablet: {
|
|
padding: spacing.lg,
|
|
maxWidth: 700,
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: spacing.xs,
|
|
},
|
|
name: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
marginRight: spacing.sm,
|
|
},
|
|
nameTablet: {
|
|
fontSize: 18,
|
|
},
|
|
principioActivo: {
|
|
fontSize: 14,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
footer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
priceContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
price: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
marginLeft: spacing.xs,
|
|
},
|
|
priceTablet: {
|
|
fontSize: 16,
|
|
},
|
|
labContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
laboratorio: {
|
|
fontSize: 12,
|
|
marginLeft: spacing.xs,
|
|
maxWidth: 120,
|
|
},
|
|
laboratorioTablet: {
|
|
fontSize: 14,
|
|
maxWidth: 200,
|
|
},
|
|
});
|