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;
  isHero?: boolean;
}): React.ReactElement {
  const { isHero = false } = props;

  return (
    <View
      style={
        isHero
          ? styles.header
          : [
              styles.header,
              {
                paddingHorizontal: 0,
                backgroundColor: 'transparent',
                borderBottomWidth: 0,
                marginBottom: 24,
                paddingTop: 40,
              },
            ]
      }
    >
      <View style={styles.headerLeft}>
        {props.logoDataUrl ? (
          <Image src={props.logoDataUrl} style={styles.logo} />
        ) : (
          <Text style={styles.brandFallback}>KLZ</Text>
        )}
      </View>
      <View style={styles.headerRight}>
        <Text style={styles.headerTitle}>{props.title}</Text>
        {props.qrDataUrl ? <Image src={props.qrDataUrl} style={styles.qr} /> : null}
      </View>
    </View>
  );
}