64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
|
|
|
|
interface SleepCardProps {
|
|
sleepDuration?: number | null;
|
|
style?: object;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
const SleepCard: React.FC<SleepCardProps> = ({
|
|
sleepDuration,
|
|
style,
|
|
onPress
|
|
}) => {
|
|
const formatSleepDuration = (duration: number): string => {
|
|
const hours = Math.floor(duration / 60);
|
|
const minutes = Math.floor(duration % 60);
|
|
return `${hours}小时${minutes}分钟`;
|
|
};
|
|
|
|
const CardContent = (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.cardHeaderRow}>
|
|
<Text style={styles.cardTitle}>睡眠</Text>
|
|
</View>
|
|
<Text style={styles.sleepValue}>
|
|
{sleepDuration != null ? formatSleepDuration(sleepDuration) : '——'}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
if (onPress) {
|
|
return (
|
|
<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
|
|
{CardContent}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
return CardContent;
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
// Container styles will be inherited from parent (FloatingCard)
|
|
},
|
|
cardHeaderRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
cardTitle: {
|
|
fontSize: 14,
|
|
color: '#192126',
|
|
},
|
|
sleepValue: {
|
|
fontSize: 16,
|
|
color: '#1E40AF',
|
|
fontWeight: '700',
|
|
marginTop: 8,
|
|
},
|
|
});
|
|
|
|
export default SleepCard; |