54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { View, Text, StyleSheet } from 'react-native'
|
|
import { Measurement } from '../types'
|
|
|
|
type Props = { measurement: Measurement | null }
|
|
|
|
const rows: { label: string; key: keyof Measurement; suffix: string }[] = [
|
|
{ label: 'Gewicht', key: 'weight', suffix: 'kg' },
|
|
{ label: 'BMI', key: 'bmi', suffix: '' },
|
|
{ label: 'Vetpercentage', key: 'bodyFatPercentage', suffix: '%' },
|
|
{ label: 'Vetmassa', key: 'fatMass', suffix: 'kg' },
|
|
{ label: 'Spierpercentage', key: 'musclePercentage', suffix: '%' },
|
|
{ label: 'Spiermassa', key: 'muscleMass', suffix: 'kg' },
|
|
{ label: 'Buikvet', key: 'visceralFat', suffix: '' },
|
|
{ label: 'Stofwisseling', key: 'bmr', suffix: 'kcal' },
|
|
]
|
|
|
|
export default function LatestMeasurementCard({ measurement }: Props) {
|
|
if (!measurement) {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.emptyText}>Nog geen metingen</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.title}>Laatste meting</Text>
|
|
<Text style={styles.date}>{new Date(measurement.measuredAt).toLocaleDateString('nl-NL')}</Text>
|
|
{rows.map(r => (
|
|
<View key={r.key} style={styles.row}>
|
|
<Text style={styles.rowLabel}>{r.label}</Text>
|
|
<Text style={styles.rowValue}>
|
|
{typeof measurement[r.key] === 'number'
|
|
? (measurement[r.key] as number).toFixed(1)
|
|
: measurement[r.key]}{' '}
|
|
{r.suffix}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: { backgroundColor: '#fff', borderRadius: 12, padding: 16, margin: 16, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8, elevation: 3 },
|
|
title: { fontSize: 18, fontWeight: '700', marginBottom: 4 },
|
|
date: { fontSize: 14, color: '#666', marginBottom: 12 },
|
|
row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 4 },
|
|
rowLabel: { fontSize: 14, color: '#555' },
|
|
rowValue: { fontSize: 14, fontWeight: '600' },
|
|
emptyText: { fontSize: 16, color: '#999', textAlign: 'center', padding: 20 },
|
|
})
|