152 lines
3.8 KiB
TypeScript
152 lines
3.8 KiB
TypeScript
import { Colors, palette } from '@/constants/Colors';
|
|
import { MedicalRecordItem } from '@/services/healthProfile';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import dayjs from 'dayjs';
|
|
import { Image } from 'expo-image';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface MedicalRecordCardProps {
|
|
item: MedicalRecordItem;
|
|
onPress: (item: MedicalRecordItem) => void;
|
|
onDelete: (item: MedicalRecordItem) => void;
|
|
}
|
|
|
|
export const MedicalRecordCard: React.FC<MedicalRecordCardProps> = ({ item, onPress, onDelete }) => {
|
|
const firstAttachment = item.images && item.images.length > 0 ? item.images[0] : null;
|
|
const isPdf = firstAttachment?.toLowerCase().endsWith('.pdf');
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.container}
|
|
onPress={() => onPress(item)}
|
|
activeOpacity={0.8}
|
|
>
|
|
<View style={styles.thumbnailContainer}>
|
|
{firstAttachment ? (
|
|
isPdf ? (
|
|
<View style={styles.pdfThumbnail}>
|
|
<Ionicons name="document-text" size={32} color="#EF4444" />
|
|
<Text style={styles.pdfText}>PDF</Text>
|
|
</View>
|
|
) : (
|
|
<Image
|
|
source={{ uri: firstAttachment }}
|
|
style={styles.thumbnail}
|
|
contentFit="cover"
|
|
transition={200}
|
|
/>
|
|
)
|
|
) : (
|
|
<View style={styles.placeholderThumbnail}>
|
|
<Ionicons name="document-text-outline" size={32} color={palette.gray[300]} />
|
|
</View>
|
|
)}
|
|
|
|
{item.images && item.images.length > 1 && (
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>+{item.images.length - 1}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.content}>
|
|
<Text style={styles.title} numberOfLines={1}>{item.title}</Text>
|
|
<Text style={styles.date}>{dayjs(item.date).format('YYYY-MM-DD')}</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={styles.deleteButton}
|
|
onPress={() => onDelete(item)}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
>
|
|
<Ionicons name="trash-outline" size={16} color={palette.gray[400]} />
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 16,
|
|
marginBottom: 12,
|
|
shadowColor: palette.gray[200],
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
overflow: 'hidden',
|
|
flexDirection: 'row',
|
|
height: 100,
|
|
},
|
|
thumbnailContainer: {
|
|
width: 100,
|
|
height: '100%',
|
|
backgroundColor: palette.gray[50],
|
|
position: 'relative',
|
|
},
|
|
thumbnail: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
pdfThumbnail: {
|
|
width: '100%',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#F3F4F6',
|
|
},
|
|
pdfText: {
|
|
fontSize: 10,
|
|
marginTop: 4,
|
|
color: '#EF4444',
|
|
fontWeight: '600',
|
|
},
|
|
placeholderThumbnail: {
|
|
width: '100%',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: palette.gray[50],
|
|
},
|
|
badge: {
|
|
position: 'absolute',
|
|
right: 8,
|
|
bottom: 8,
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
borderRadius: 10,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
},
|
|
badgeText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
fontWeight: '600',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 12,
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: palette.gray[800],
|
|
marginBottom: 4,
|
|
fontFamily: 'AliBold',
|
|
},
|
|
date: {
|
|
fontSize: 12,
|
|
color: palette.purple[600],
|
|
fontWeight: '500',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
deleteButton: {
|
|
position: 'absolute',
|
|
top: 8,
|
|
right: 8,
|
|
padding: 4,
|
|
},
|
|
});
|