mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce new PDF layouts and modules, enhance shared UI components, and add wording guidelines.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-03 19:25:07 +01:00
parent 788c7aa7df
commit 3e70b00abc
20 changed files with 1057 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/pdf/SharedUI.tsx
View File

@@ -13,7 +13,7 @@ export const pdfStyles = PDFStyleSheet.create({
paddingTop: 45, // DIN 5008
paddingLeft: 70, // ~25mm
paddingRight: 57, // ~20mm
paddingBottom: 48,
paddingBottom: 80, // Safe buffer for absolute footer
backgroundColor: '#ffffff',
fontFamily: 'Helvetica',
fontSize: 10,
@@ -129,13 +129,98 @@ export const pdfStyles = PDFStyleSheet.create({
width: 10,
borderTopWidth: 0.5,
borderTopColor: '#cbd5e1',
}
},
// Atoms
industrialListItem: {
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: 6,
},
industrialBulletBox: {
width: 6,
height: 6,
backgroundColor: '#0f172a',
marginRight: 8,
marginTop: 5,
},
industrialTitle: {
fontSize: 24,
fontWeight: 'bold',
color: '#0f172a',
marginBottom: 6,
letterSpacing: -0.5,
},
industrialSubtitle: {
fontSize: 8,
fontWeight: 'bold',
color: '#94a3b8',
textTransform: 'uppercase',
marginBottom: 16,
letterSpacing: 2,
},
industrialTextLead: {
fontSize: 10,
color: '#334155',
lineHeight: 1.6,
marginBottom: 12,
},
industrialText: {
fontSize: 9,
color: '#64748b',
lineHeight: 1.6,
marginBottom: 8,
},
industrialCard: {
padding: 16,
borderWidth: 1,
borderColor: '#e2e8f0',
marginBottom: 12,
},
industrialCardTitle: {
fontSize: 10,
fontWeight: 'bold',
color: '#0f172a',
marginBottom: 4,
textTransform: 'uppercase',
letterSpacing: 0.5,
},
darkBox: {
marginTop: 32,
padding: 24,
backgroundColor: '#0f172a',
color: '#ffffff',
},
darkTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
marginBottom: 8,
},
darkText: {
fontSize: 9,
color: '#94a3b8',
lineHeight: 1.6,
},
});
export const IndustrialListItem = ({ children }: { children: React.ReactNode }) => (
<PDFView style={pdfStyles.industrialListItem}>
<PDFView style={pdfStyles.industrialBulletBox} />
{children}
</PDFView>
);
export const IndustrialCard = ({ title, children, style = {} }: { title: string; children: React.ReactNode; style?: any }) => (
<PDFView style={[pdfStyles.industrialCard, style]}>
<PDFText style={pdfStyles.industrialCardTitle}>{title}</PDFText>
{children}
</PDFView>
);
export const FoldingMarks = () => (<><PDFView style={[pdfStyles.foldingMark, { top: 297.6 }]} fixed /><PDFView style={[pdfStyles.foldingMark, { top: 420.9, width: 15 }]} fixed /><PDFView style={[pdfStyles.foldingMark, { top: 595.3 }]} fixed /></>);
export const Footer = ({ logo, companyData, bankData, showDetails = true }: { logo?: string; companyData: any; bankData: any; showDetails?: boolean }) => (
<PDFView style={pdfStyles.footer}><PDFView style={pdfStyles.footerColumn}>{logo ? (<PDFImage src={logo} style={pdfStyles.footerLogo} />) : (<PDFText style={{ fontSize: 12, fontWeight: 'bold', marginBottom: 8 }}>marc mintel</PDFText>)}</PDFView>{showDetails && (<><PDFView style={pdfStyles.footerColumn}><PDFText style={pdfStyles.footerText}><PDFText style={pdfStyles.footerLabel}>{companyData.name}</PDFText>{"\n"}{companyData.address1}{"\n"}{companyData.address2}{"\n"}UST: {companyData.ustId}</PDFText></PDFView><PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}><PDFText style={[pdfStyles.footerText, { textAlign: 'right' }]}><PDFText style={pdfStyles.footerLabel}>{bankData.name}</PDFText>{"\n"}{bankData.bic}{"\n"}{bankData.iban}</PDFText><PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed /></PDFView></>)}{!showDetails && (<PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}><PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed /></PDFView>)}</PDFView>
export const Footer = ({ logo, companyData, bankData, showDetails = true, showPageNumber = true }: { logo?: string; companyData: any; bankData: any; showDetails?: boolean; showPageNumber?: boolean }) => (
<PDFView style={pdfStyles.footer}><PDFView style={pdfStyles.footerColumn}>{logo ? (<PDFImage src={logo} style={pdfStyles.footerLogo} />) : (<PDFText style={{ fontSize: 12, fontWeight: 'bold', marginBottom: 8 }}>marc mintel</PDFText>)}</PDFView>{showDetails && (<><PDFView style={pdfStyles.footerColumn}><PDFText style={pdfStyles.footerText}><PDFText style={pdfStyles.footerLabel}>{companyData.name}</PDFText>{"\n"}{companyData.address1}{"\n"}{companyData.address2}{"\n"}UST: {companyData.ustId}</PDFText></PDFView><PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}>{showPageNumber && <PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />}</PDFView></>)}{!showDetails && (<PDFView style={[pdfStyles.footerColumn, { alignItems: 'flex-end' }]}>{showPageNumber && <PDFText style={pdfStyles.pageNumber} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} fixed />}</PDFView>)}</PDFView>
);
export const Header = ({ sender, recipient, icon, showAddress = true }: { sender?: string; recipient?: { title: string; subtitle?: string; email?: string; address?: string; phone?: string; taxId?: string }; icon?: string; showAddress?: boolean; }) => (