PDF Styling improvements
This commit is contained in:
Joao Ramos
@@ -1,11 +1,19 @@
|
||||
import React from "react";
|
||||
import { Document, Page, View, Text, StyleSheet } from "@react-pdf/renderer";
|
||||
import {
|
||||
Document,
|
||||
Page,
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
} from "@react-pdf/renderer";
|
||||
import ProgressBar from "./progress.bar";
|
||||
// import RadialProgress from "./radial.progress";
|
||||
// import RadialProgressSvg from "./radial.progress.svg";
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: {
|
||||
paddingTop: 35,
|
||||
paddingBottom: 65,
|
||||
paddingBottom: 20,
|
||||
paddingHorizontal: 35,
|
||||
},
|
||||
titleView: {
|
||||
@@ -17,29 +25,28 @@ const styles = StyleSheet.create({
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
textPadding: {
|
||||
margin: "16px",
|
||||
},
|
||||
userSection: {
|
||||
fontWeight: "bold",
|
||||
margin: "8px",
|
||||
},
|
||||
separator: {
|
||||
width: "100%",
|
||||
borderBottom: "1px solid blue",
|
||||
borderBottom: "1px solid #89b0c2",
|
||||
},
|
||||
textFont: {
|
||||
fontFamily: "Helvetica",
|
||||
},
|
||||
textBold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
textColor: {
|
||||
color: "blue",
|
||||
color: "#4e4969",
|
||||
},
|
||||
textUnderline: {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
skillsTitle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
skillsText: {
|
||||
fontSize: 12,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 9,
|
||||
spacedRow: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
});
|
||||
interface Props {
|
||||
@@ -51,36 +58,81 @@ interface Props {
|
||||
}
|
||||
|
||||
const PDFReport = ({ date, name, email, id, gender }: Props) => {
|
||||
const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
|
||||
const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
|
||||
const defaultSkillsTitleStyle = [
|
||||
styles.textFont,
|
||||
styles.textColor,
|
||||
styles.textBold,
|
||||
{ fontSize: 7 },
|
||||
];
|
||||
return (
|
||||
<Document>
|
||||
<Page style={styles.body}>
|
||||
<View style={styles.titleView}>
|
||||
<Text style={[styles.textColor, styles.textUnderline, styles.title]}>
|
||||
<Text
|
||||
style={[
|
||||
styles.textFont,
|
||||
styles.textBold,
|
||||
styles.textColor,
|
||||
styles.textUnderline,
|
||||
styles.title,
|
||||
{ fontSize: 14 },
|
||||
]}
|
||||
>
|
||||
English Skills Test Result Report
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textPadding}>
|
||||
<Text>Date of Test: {date}</Text>
|
||||
<Text style={defaultTextStyle}>Date of Test: {date}</Text>
|
||||
</View>
|
||||
<Text style={styles.userSection}>Candidate Information:</Text>
|
||||
<Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
|
||||
Candidate Information:
|
||||
</Text>
|
||||
<View style={styles.textPadding}>
|
||||
<Text>Name: {name}</Text>
|
||||
<Text>ID: {id}</Text>
|
||||
<Text>Email: {email}</Text>
|
||||
<Text>Gender: {gender}</Text>
|
||||
<Text style={defaultTextStyle}>Name: {name}</Text>
|
||||
<Text style={defaultTextStyle}>ID: {id}</Text>
|
||||
<Text style={defaultTextStyle}>Email: {email}</Text>
|
||||
<Text style={defaultTextStyle}>Gender: {gender}</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text>Test Details:</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.textFont,
|
||||
styles.textBold,
|
||||
styles.textColor,
|
||||
{ fontSize: 12 },
|
||||
]}
|
||||
>
|
||||
Test Details:
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text>Performance Summary</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.textFont,
|
||||
styles.textBold,
|
||||
styles.textColor,
|
||||
{ fontSize: 12 },
|
||||
]}
|
||||
>
|
||||
Performance Summary
|
||||
</Text>
|
||||
<View>
|
||||
<Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[{ paddingTop: 30 }, styles.separator]}></View>
|
||||
<View>
|
||||
<Text style={[styles.textColor, styles.textUnderline]}>
|
||||
<Text
|
||||
style={[
|
||||
styles.textFont,
|
||||
styles.textBold,
|
||||
styles.textColor,
|
||||
styles.textUnderline,
|
||||
{ fontSize: 12, paddingTop: 10 },
|
||||
]}
|
||||
>
|
||||
Skills Feedback
|
||||
</Text>
|
||||
<View
|
||||
@@ -88,49 +140,74 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
|
||||
paddingTop: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.textColor, styles.skillsTitle]}>
|
||||
Listening
|
||||
</Text>
|
||||
<Text style={styles.skillsText}>xxx</Text>
|
||||
<Text style={[styles.textColor, styles.skillsTitle]}>Reading</Text>
|
||||
<Text style={styles.skillsText}>xxx</Text>
|
||||
<Text style={[styles.textColor, styles.skillsTitle]}>Writing</Text>
|
||||
<Text style={styles.skillsText}>xxx</Text>
|
||||
<Text style={[styles.textColor, styles.skillsTitle]}>Speaking</Text>
|
||||
<Text style={styles.skillsText}>xxx</Text>
|
||||
<Text style={defaultSkillsTitleStyle}>Listening</Text>
|
||||
<Text style={defaultSkillsTextStyle}>xxx</Text>
|
||||
<Text style={defaultSkillsTitleStyle}>Reading</Text>
|
||||
<Text style={defaultSkillsTextStyle}>xxx</Text>
|
||||
<Text style={defaultSkillsTitleStyle}>Writing</Text>
|
||||
<Text style={defaultSkillsTextStyle}>xxx</Text>
|
||||
<Text style={defaultSkillsTitleStyle}>Speaking</Text>
|
||||
<Text style={defaultSkillsTextStyle}>xxx</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[{ paddingTop: 30 }, styles.separator]}></View>
|
||||
<View style={[{ paddingTop: 30 }, styles.footerText]}>
|
||||
<Text>Validity</Text>
|
||||
<Text>
|
||||
This report remains valid for a duration of three months from the
|
||||
test date. Confidential – circulated for concern people
|
||||
</Text>
|
||||
<Text>Declaration</Text>
|
||||
<Text>
|
||||
We hereby declare that exam results on our platform, assessed by AI,
|
||||
are not the sole determinants of candidates' English
|
||||
proficiency levels. While EnCoach provides feedback based on
|
||||
assessments, we recognize that language proficiency encompasses
|
||||
practical application, cultural understanding, and real-life
|
||||
communication. We urge users to consider exam results as a measure
|
||||
of progress and improvement, and we continuously enhance our system
|
||||
to ensure accuracy and reliability.
|
||||
</Text>
|
||||
<View style={[{ paddingTop: 30 }, styles.separator]}>
|
||||
<View>
|
||||
<ProgressBar
|
||||
width={200}
|
||||
height={50}
|
||||
backgroundColor="lightblue"
|
||||
progressColor="red"
|
||||
height={18}
|
||||
backgroundColor="#cc5b55"
|
||||
progressColor="#fab7b0"
|
||||
percentage={60}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.textColor}>
|
||||
<Text>info@encoach.com</Text>
|
||||
</View>
|
||||
<View style={{ flexGrow: 1 }}></View>
|
||||
<View style={[{ paddingTop: 30, fontSize: 5 }, styles.textFont]}>
|
||||
<View
|
||||
style={[
|
||||
styles.spacedRow,
|
||||
{
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View>
|
||||
<Text>Validity</Text>
|
||||
<Text>
|
||||
This report remains valid for a duration of three months from
|
||||
the test date.
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text>Confidential – circulated for concern people</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ paddingTop: 10 }}>
|
||||
<Text>Declaration</Text>
|
||||
<Text style={{ paddingTop: 5 }}>
|
||||
We hereby declare that exam results on our platform, assessed by
|
||||
AI, are not the sole determinants of candidates' English
|
||||
proficiency levels. While EnCoach provides feedback based on
|
||||
assessments, we recognize that language proficiency encompasses
|
||||
practical application, cultural understanding, and real-life
|
||||
communication. We urge users to consider exam results as a measure
|
||||
of progress and improvement, and we continuously enhance our
|
||||
system to ensure accuracy and reliability.
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.textColor, { paddingTop: 5 }]}>
|
||||
<Text style={styles.textUnderline}>info@encoach.com</Text>
|
||||
<Text>https://encoach.com</Text>
|
||||
<Text>Group ID: TRI64BNBOIU5043</Text>
|
||||
<View style={styles.spacedRow}>
|
||||
<Text>Group ID: TRI64BNBOIU5043</Text>
|
||||
<Text
|
||||
// style={styles.pageNumber}
|
||||
render={({ pageNumber, totalPages }) =>
|
||||
`${pageNumber} / ${totalPages}`
|
||||
}
|
||||
fixed
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
|
||||
Reference in New Issue
Block a user