125 lines
3.0 KiB
TypeScript
125 lines
3.0 KiB
TypeScript
import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
|
|
import dayjs from 'dayjs';
|
|
import LottieView from 'lottie-react-native';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface MoodCardProps {
|
|
moodCheckin: MoodCheckin | null;
|
|
onPress: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function MoodCard({ moodCheckin, onPress }: MoodCardProps) {
|
|
const { t } = useTranslation();
|
|
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
|
|
const animationRef = useRef<LottieView>(null);
|
|
|
|
useEffect(() => {
|
|
if (animationRef.current) {
|
|
animationRef.current.play();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.moodCardContent} >
|
|
<View style={styles.moodCardHeader}>
|
|
<View style={styles.titleContainer}>
|
|
<Image
|
|
source={require('@/assets/images/icons/icon-mood.png')}
|
|
style={styles.titleIcon}
|
|
/>
|
|
<Text style={styles.cardTitle}>{t('statistics.components.mood.title')}</Text>
|
|
</View>
|
|
<LottieView
|
|
ref={animationRef}
|
|
source={require('@/assets/lottie/mood/mood_demo.json')}
|
|
autoPlay
|
|
loop
|
|
style={styles.lottieAnimation}
|
|
/>
|
|
</View>
|
|
{moodCheckin ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodPreviewText}>
|
|
{moodConfig?.label || moodCheckin.moodType}
|
|
</Text>
|
|
<Text style={styles.moodPreviewTime}>
|
|
{dayjs(moodCheckin.createdAt).format('HH:mm')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.moodEmptyText}>{t('statistics.components.mood.empty')}</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
moodCardContent: {
|
|
width: '100%',
|
|
},
|
|
|
|
moodCardHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
titleIcon: {
|
|
width: 16,
|
|
height: 16,
|
|
marginRight: 6,
|
|
resizeMode: 'contain',
|
|
},
|
|
|
|
cardTitle: {
|
|
fontSize: 14,
|
|
color: '#192126',
|
|
fontWeight: '600',
|
|
fontFamily: 'AliBold',
|
|
},
|
|
|
|
lottieAnimation: {
|
|
width: 30,
|
|
height: 30,
|
|
},
|
|
|
|
moodPreview: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginTop: 12,
|
|
},
|
|
moodPreviewText: {
|
|
fontSize: 14,
|
|
color: '#059669',
|
|
fontWeight: '600',
|
|
fontFamily: 'AliBold',
|
|
},
|
|
moodPreviewTime: {
|
|
fontSize: 12,
|
|
color: '#6B7280',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
moodEmptyText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
moodLoadingText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
}); |