Skip to content

Instantly share code, notes, and snippets.

@Ademking
Created March 19, 2024 07:24
Show Gist options
  • Save Ademking/f6f272e942142eb94b8cdf9ff3e9c0d6 to your computer and use it in GitHub Desktop.
Save Ademking/f6f272e942142eb94b8cdf9ff3e9c0d6 to your computer and use it in GitHub Desktop.
Certificate
import { Page, Text, View, StyleSheet, Document, Font, Image } from "@react-pdf/renderer";
import { containsArabic } from "../utils/utils";
Font.register({
family: "Noto Sans Arabic",
src: "https://cdn.jsdelivr.net/npm/@expo-google-fonts/noto-sans-arabic@0.2.3/NotoSansArabic_400Regular.ttf",
});
Font.register({
family: "Work Sans",
src: "https://fonts.gstatic.com/s/worksans/v2/ElUAY9q6T0Ayx4zWzW63VKCWcynf_cDxXwCLxiixG1c.ttf",
});
const styles = StyleSheet.create({
body: {
width: "2000px",
height: "1414px",
direction: "rtl",
backgroundColor: "#E4E4E4",
},
image: {
position: "absolute",
zIndex: -1,
width: "100%",
height: "100%",
objectFit: "fill",
},
text: {
position: "absolute",
left: "0px",
right: "0px",
marginHorizontal: "auto",
textAlign: "center",
justifyContent: "center",
},
});
function langImg(lang: "العربية" | "English" | "Français") {
switch (lang) {
case "العربية":
return "AR";
case "English":
return "EN";
case "Français":
return "FR";
default:
return "AR";
}
}
function CourseCertificate({ lang = "العربية", courseName = "", fullname = "" }: { lang: "العربية" | "English" | "Français"; courseName?: string; fullname?: string }) {
return (
<Document>
<Page size="A4" orientation="landscape" style={styles.body}>
<View>
<Text
style={{
top: containsArabic(fullname) ? "210px" : "245px",
...styles.text,
textAlign: "center",
fontSize: 70,
fontWeight: "bold",
color: "#50264a",
fontFamily: containsArabic(fullname) ? "Noto Sans Arabic" : "Work Sans",
}}
>
{fullname}
</Text>
<Text
style={{
top: containsArabic(courseName) ? "405px" : "420px",
...styles.text,
textAlign: "center",
fontSize: 25,
fontWeight: "bold",
color: "#e74c3c",
fontFamily: containsArabic(courseName) ? "Noto Sans Arabic" : "Work Sans",
}}
>
{courseName}
</Text>
</View>
<Image src={`/imgs/cert/${langImg(lang)}.png`} style={styles.image} />
</Page>
</Document>
);
}
export default CourseCertificate;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment