lti-web-client/src/components/helper/pdf/layout/PdfPageNumber.tsx

import { Text, View, StyleSheet } from '@react-pdf/renderer';
import type { Style } from '@react-pdf/types';

type PdfPageNumberProps = {
  style?: Style;
  /**
   * Format template for page number.
   * Use {pageNumber} and {totalPages} as placeholders.
   * Default: "{pageNumber} / {totalPages}"
   */
  format?: string;
};

const styles = StyleSheet.create({
  footer: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    position: 'absolute',
    fontSize: 8,
    bottom: 30,
    left: 0,
    right: 0,
    textAlign: 'center',
    color: 'grey',
  },
});

export const PdfPageNumber = ({
  style,
  format = '{pageNumber} / {totalPages}',
}: PdfPageNumberProps) => {
  return (
    <View style={style || styles.footer} fixed>
      <Text
        render={({ pageNumber, totalPages }) =>
          format
            .replace('{pageNumber}', String(pageNumber))
            .replace('{totalPages}', String(totalPages))
        }
        fixed
      />
    </View>
  );
};