31 lines
1021 B
TypeScript
31 lines
1021 B
TypeScript
import * as React from 'react';
|
|
import { Text, View } from '@react-pdf/renderer';
|
|
|
|
import type { KeyValueItem } from '../../model/types';
|
|
import { styles } from '../styles';
|
|
|
|
export function KeyValueGrid(props: { items: KeyValueItem[] }): React.ReactElement | null {
|
|
const items = (props.items || []).filter(i => i.label && i.value);
|
|
if (!items.length) return null;
|
|
|
|
return (
|
|
<View style={styles.kvGrid}>
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
const valueText = item.unit ? `${item.value} ${item.unit}` : item.value;
|
|
return (
|
|
<View key={`${item.label}-${index}`} style={[styles.kvRow, isLast ? styles.kvRowLast : null]}>
|
|
<View style={styles.kvLabel}>
|
|
<Text style={styles.kvLabelText}>{item.label}</Text>
|
|
</View>
|
|
<View style={styles.kvValue}>
|
|
<Text style={styles.kvValueText}>{valueText}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|
|
|