Marc Mintel
5da88356a8
Some checks failed
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 1s
Monorepo Pipeline / 🧹 Lint (push) Failing after 35s
Monorepo Pipeline / 🧪 Test (push) Failing after 35s
Monorepo Pipeline / 🏗️ Build (push) Failing after 12s
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Monorepo Pipeline / 🐳 Build Image Processor (push) Has been skipped
Monorepo Pipeline / 🐳 Build Directus (Base) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
115 lines
2.9 KiB
TypeScript
115 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import * as React from "react";
|
||
import {
|
||
View as PDFView,
|
||
Text as PDFText,
|
||
StyleSheet,
|
||
} from "@react-pdf/renderer";
|
||
import { DocumentTitle, COLORS, FONT_SIZES } from "../SharedUI";
|
||
|
||
const styles = StyleSheet.create({
|
||
section: { marginBottom: 32 },
|
||
intro: {
|
||
fontSize: FONT_SIZES.BODY,
|
||
color: COLORS.TEXT_DIM,
|
||
lineHeight: 1.4,
|
||
marginBottom: 24,
|
||
textAlign: "justify",
|
||
},
|
||
sitemapTree: {
|
||
marginTop: 8,
|
||
borderLeftWidth: 1,
|
||
borderLeftColor: COLORS.GRID,
|
||
marginLeft: 4,
|
||
paddingLeft: 16,
|
||
},
|
||
rootTitle: {
|
||
fontSize: FONT_SIZES.LABEL,
|
||
fontWeight: "bold",
|
||
color: COLORS.CHARCOAL,
|
||
textTransform: "uppercase",
|
||
letterSpacing: 1,
|
||
marginBottom: 16,
|
||
marginLeft: -16, // offset the padding
|
||
},
|
||
categorySection: { marginBottom: 16 },
|
||
categoryHeader: {
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
marginBottom: 8,
|
||
},
|
||
categoryIcon: {
|
||
width: 6,
|
||
height: 6,
|
||
backgroundColor: COLORS.CHARCOAL,
|
||
marginRight: 8,
|
||
},
|
||
categoryTitle: {
|
||
fontSize: FONT_SIZES.BODY,
|
||
fontWeight: "bold",
|
||
color: COLORS.CHARCOAL,
|
||
},
|
||
pageRow: {
|
||
flexDirection: "row",
|
||
alignItems: "flex-start",
|
||
marginBottom: 6,
|
||
paddingLeft: 14,
|
||
},
|
||
pageBullet: {
|
||
fontSize: FONT_SIZES.BODY,
|
||
color: COLORS.TEXT_LIGHT,
|
||
marginRight: 8,
|
||
width: 10,
|
||
},
|
||
pageTitle: {
|
||
fontSize: FONT_SIZES.BODY,
|
||
color: COLORS.TEXT_MAIN,
|
||
fontWeight: "bold",
|
||
},
|
||
pageDesc: {
|
||
fontSize: FONT_SIZES.SMALL,
|
||
color: COLORS.TEXT_DIM,
|
||
marginLeft: 6,
|
||
marginTop: 1,
|
||
},
|
||
});
|
||
|
||
export const SitemapModule = ({ state }: any) => (
|
||
<>
|
||
<DocumentTitle title="Informationsarchitektur" isHero={true} />
|
||
<PDFView style={styles.section}>
|
||
<PDFText style={styles.intro}>
|
||
Die folgende Baumstruktur definiert die logische Hierarchie und
|
||
Benutzerführung. Sie dient als kompakter Bauplan für die technische
|
||
Umsetzung aller relevanten Geschäftsbereiche.
|
||
</PDFText>
|
||
|
||
<PDFView style={styles.sitemapTree}>
|
||
<PDFText style={styles.rootTitle}>/ Root (Startseite)</PDFText>
|
||
|
||
{state.sitemap?.map((cat: any, i: number) => (
|
||
<PDFView key={i} style={styles.categorySection} wrap={false}>
|
||
<PDFView style={styles.categoryHeader}>
|
||
<PDFView style={styles.categoryIcon} />
|
||
<PDFText style={styles.categoryTitle}>{cat.category}</PDFText>
|
||
</PDFView>
|
||
|
||
<PDFView>
|
||
{cat.pages.map((p: any, j: number) => (
|
||
<PDFView key={j} style={styles.pageRow}>
|
||
<PDFText style={styles.pageBullet}>↳</PDFText>
|
||
<PDFText style={styles.pageTitle}>{p.title}</PDFText>
|
||
{p.desc && (
|
||
<PDFText style={styles.pageDesc}> – {p.desc}</PDFText>
|
||
)}
|
||
</PDFView>
|
||
))}
|
||
</PDFView>
|
||
</PDFView>
|
||
))}
|
||
</PDFView>
|
||
</PDFView>
|
||
</>
|
||
);
|