diff --git a/diplomas/public/encabezado.png b/diplomas/public/encabezado.png new file mode 100644 index 0000000..beb13ec Binary files /dev/null and b/diplomas/public/encabezado.png differ diff --git a/diplomas/src/components/Diploma.jsx b/diplomas/src/components/Diploma.jsx index 7325af6..5c2af03 100644 --- a/diplomas/src/components/Diploma.jsx +++ b/diplomas/src/components/Diploma.jsx @@ -1,10 +1,29 @@ import React from "react"; -import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer"; +import { + Document, + Page, + Text, + View, + StyleSheet, + Image, +} from "@react-pdf/renderer"; const styles = StyleSheet.create({ - page: { padding: 40, fontFamily: "Helvetica" }, + page: { fontFamily: "Helvetica" }, title: { fontSize: 24, textAlign: "center", marginBottom: 20 }, - section: { marginBottom: 10, fontSize: 14 }, + nombre: { + fontSize: 18, + textAlign: "center", + marginBottom: 10, + fontStyle: "italic", + }, + curso: { + fontSize: 30, + textAlign: "center", + marginBottom: 10, + fontWeight: "bold", + }, + section: { padding: 40, fontSize: 14 }, competencias: { marginLeft: 20, marginTop: 5 }, competencia: { fontSize: 12, marginBottom: 2 }, footer: { @@ -20,36 +39,21 @@ export default function Diploma({ alumno, curso, competencias = [], fecha }) { return ( - Diploma - - - Alumno: - {alumno?.nombre} - - - - - Curso: - {curso?.nombre || "Sin curso"} - - - - Competencias Acreditadas: - - {(competencias || []).map((comp) => ( - - - {comp.descripcion} - - ))} - - - - - Fecha: - {fecha} - - - Generado por SIDAC + + Otorga la presente + CONSTANCIA + a: + {alumno?.nombre} + + Por su asistencia a la píldora educativa + + {curso?.nombre || "Sin curso"} + + con duración de 2 horas, modalidad remota + + + Se expide en la ciudad de Xalapa, Ver., {fecha} + );