klz-cables.com/scripts/pdf/react-pdf/DatasheetDocument.tsx

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

import type { DatasheetModel, DatasheetVoltageTable } from '../model/types';
import { CONFIG } from '../model/utils';
import { styles } from './styles';
import { Header } from './components/Header';
import { Footer } from './components/Footer';
import { Section } from './components/Section';
import { KeyValueGrid } from './components/KeyValueGrid';
import { DenseTable } from './components/DenseTable';

type Assets = {
  logoDataUrl: string | null;
  heroDataUrl: string | null;
  qrDataUrl: string | null;
};

export function DatasheetDocument(props: {
  model: DatasheetModel;
  assets: Assets;
}): React.ReactElement {
  const { model, assets } = props;
  const headerTitle = model.labels.datasheet;

  // Dense tables require compact headers (no wrapping). Use standard abbreviations.
  const firstColLabel = model.locale === 'de' ? 'Adern & Querschnitt' : 'Cores & Cross-section';

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.hero}>
          <Header
            title={headerTitle}
            logoDataUrl={assets.logoDataUrl}
            qrDataUrl={assets.qrDataUrl}
            isHero={true}
          />

          <View style={styles.productRow}>
            <View style={styles.productInfoCol}>
              <View style={styles.productHero}>
                {model.product.categoriesLine ? (
                  <Text style={styles.productMeta}>{model.product.categoriesLine}</Text>
                ) : null}
                <Text style={styles.productName}>{model.product.name}</Text>
              </View>
            </View>
            <View style={styles.productImageCol}>
              {assets.heroDataUrl ? (
                <Image src={assets.heroDataUrl} style={styles.heroImage} />
              ) : (
                <Text style={styles.noImage}>{model.labels.noImage}</Text>
              )}
            </View>
          </View>
        </View>

        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />

        <View style={styles.content}>
          {model.product.descriptionText ? (
            <Section title={model.labels.description} minPresenceAhead={24}>
              <Text style={styles.body}>{model.product.descriptionText}</Text>
            </Section>
          ) : null}

          {model.technicalItems.length ? (
            <Section title={model.labels.technicalData} minPresenceAhead={24}>
              <KeyValueGrid items={model.technicalItems} />
            </Section>
          ) : null}
        </View>
      </Page>

      <Page size="A4" style={styles.page}>
        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />

        <View style={styles.content}>
          {model.voltageTables.map((t: DatasheetVoltageTable) => (
            <View
              key={t.voltageLabel}
              style={{ marginBottom: 14 }}
              break={false}
              minPresenceAhead={24}
            >
              <Text
                style={styles.sectionTitle}
              >{`${model.labels.crossSection} — ${t.voltageLabel}`}</Text>
              <View style={styles.sectionAccent} />
              <DenseTable
                table={{ columns: t.columns, rows: t.rows }}
                firstColLabel={firstColLabel}
              />
            </View>
          ))}

          {model.legendItems.length ? (
            <Section
              title={model.locale === 'de' ? 'ABKÜRZUNGEN' : 'ABBREVIATIONS'}
              minPresenceAhead={24}
            >
              <KeyValueGrid items={model.legendItems} />
            </Section>
          ) : null}
        </View>
      </Page>
    </Document>
  );
}