klz-cables.com/scripts/pdf/react-pdf/components/Header.tsx

import * as React from 'react';
import { Image, Text, View } from '@react-pdf/renderer';

import { styles } from '../styles';

export function Header(props: {
  title: string;
  logoDataUrl?: string | null;
  qrDataUrl?: string | null;
}): React.ReactElement {
  return (
    <View style={styles.header} fixed>
      <View style={styles.headerLeft}>
        {props.logoDataUrl ? (
          <Image src={props.logoDataUrl} style={styles.logo} />
        ) : (
          <View style={styles.brandFallback}>
            <Text style={styles.brandFallbackKlz}>KLZ</Text>
            <Text style={styles.brandFallbackCables}>Cables</Text>
          </View>
        )}
      </View>
      <View style={styles.headerRight}>
        <Text style={styles.headerTitle}>{props.title}</Text>
        {props.qrDataUrl ? <Image src={props.qrDataUrl} style={styles.qr} /> : null}
      </View>
    </View>
  );
}