57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, Image } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './notificationItem.styles';
|
|
import { NotificationItem as NotificationItemType } from '@interfaces';
|
|
import dayjs from 'dayjs';
|
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
|
|
|
dayjs.extend(relativeTime);
|
|
|
|
interface NotificationItemProps {
|
|
item: NotificationItemType;
|
|
onPress?: (item: NotificationItemType) => void;
|
|
}
|
|
|
|
export const NotificationItem: React.FC<NotificationItemProps> = ({ item, onPress }) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const isUnread = String(item.isread) === '0';
|
|
const cleanImageUrl = item.profile_image ? item.profile_image.replace(/"/g, '').trim() : '';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.card, isUnread && styles.unreadCard]}
|
|
activeOpacity={0.7}
|
|
onPress={() => onPress && onPress(item)}
|
|
>
|
|
<View style={styles.iconWrapper}>
|
|
{cleanImageUrl ? (
|
|
<Image
|
|
source={{ uri: cleanImageUrl }}
|
|
style={styles.profileImage}
|
|
resizeMode="cover"
|
|
/>
|
|
) : (
|
|
<Icon name="person-circle-outline" size={38} color={colors.icon ?? '#888'} />
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.contentContainer}>
|
|
<View style={styles.titleRow}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{item.from_fullname || 'Notification'}
|
|
</Text>
|
|
<Text style={styles.time}>{dayjs(item.full_date || item.date).fromNow()}</Text>
|
|
{isUnread && <View style={styles.unreadDot} />}
|
|
</View>
|
|
<Text style={styles.description} numberOfLines={2}>
|
|
{item.description}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|