Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 14x 14x 3x | import { StyleSheet, Text, View } from "@react-pdf/renderer";
import { MediaItem } from "@sections/PayBuilder/provider/provider.type";
import { MicroInformations } from "./PDFMicroInformations";
import { formatInUTCMoment } from "@utils/date.helpers";
const styles = StyleSheet.create({
text: {
fontSize: "24px",
fontWeight: 300,
lineHeight: "100%",
fontFamily: "Give Whyte",
},
});
type TDate = string | number | null | undefined;
export const PDFHeader = ({
logo,
dueDate,
invoiceDate,
invoiceReference,
}: {
logo: string | MediaItem;
dueDate: TDate;
invoiceDate: number | Date;
invoiceReference: string;
}) => {
return (
<View
style={{
display: "flex",
flexDirection: "column",
gap: "12px",
}}
>
<Text style={styles.text}>Invoice</Text>
<MicroInformations
infos={[
invoiceReference && `Invoice Number: ${invoiceReference}`,
`Date: ${formatInUTCMoment(invoiceDate, "Do MMMM YYYY", true)}`,
`Due Date: ${formatInUTCMoment(dueDate, "Do MMMM YYYY")}`,
]}
/>
</View>
);
};
|