Components
Constancia
VistaWeb.tsx

Constancia

Este componente tiene la función de presentar una presentación de como quedaría la constancia en pdf, pero en una vista web.

Props

Los props que se le pasan a este componente vienen desde la página de constancia, a la que se accede al momento de poner la asistencia a un evento de una persona.

VistaWeb.tsx
import React from 'react'
 
const VistaWeb = ({data} : any) => {
 
    return (
        <div style={
            {
                display: 'flex',
                flexDirection: 'column',
                width: '60%',
                margin: '0 auto',
                fontFamily: 'Arial',
                backgroundColor: 'white',
            }
        }>
 
            <img src='/images/headerConstancia.jpg'></img>
 
            <p style={{
                textAlign: 'center',
            }}>Otorga la presente constancia a:</p>
 
            <h1 style={{
                textAlign: 'center',
            }}>{ data ? data[0] : '...' }</h1>
 
            <p style={{
                textAlign: 'center',
            }}>
                por asistir al evento:
            </p>
            <h1 style={{fontWeight: 'bold', textAlign:'center', textTransform: 'uppercase'}}>{ data ? data[1] : '...' }</h1>
 
            <p style={{
                textAlign: 'center',
            }}> {lorem} </p>
 
            <p style={{
                textAlign: 'center',
                textTransform: 'capitalize',
                fontWeight: 'bold',
            }}>{ data ? data[2] : '...' }</p>
 
            <p style={{textAlign: 'center', fontWeight:'bold', marginTop: '10rem'}}>{ secretario }</p>
            <p style={{textAlign: 'center', fontSize: '10px'}}>Secretario Politécnico "Ing. Jorge Matute Remus"</p>
 
 
            <img src='/images/footerConstancia.jpg' style={{
                justifySelf: 'end',
            }}></img>
        </div>
    )
}
 
export default VistaWeb

Referencias

Libreria React-pdf (opens in a new tab)

Video de ejemplo (opens in a new tab)

Last updated on January 10, 2023