wip

scripts/pdf/react-pdf/components/KeyValueGrid.tsx

@@ -0,0 +1,30 @@
+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>
+  );
+}
+