98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
import React from 'react'
|
|
import { Dialog } from 'primereact/dialog'
|
|
import { Button } from 'primereact/button'
|
|
|
|
class InfoDialog extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
openInfoDialog: false,
|
|
footer: (
|
|
<>
|
|
<Button label='Cerrar' icon='pi pi-times' onClick={this.onClose} />
|
|
</>
|
|
),
|
|
}
|
|
}
|
|
onClose = () => this.setState({ openInfoDialog: false })
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Dialog
|
|
visible={this.state.openInfoDialog}
|
|
style={{ width: '650px' }}
|
|
modal
|
|
className='p-fluid'
|
|
header={this.props.header}
|
|
footer={this.state.footer}
|
|
>
|
|
<div className='container text-center'>
|
|
<div className='row my-4'>
|
|
<div className='col-4 md:col-4'>
|
|
<p>Nombre</p>
|
|
<div
|
|
className='p-0 col-2 md:col-2'
|
|
style={{ margin: '0 auto' }}
|
|
>
|
|
<div className='p-inputgroup align-items-center justify-content-evenly'>
|
|
<i className='pi pi-user icon-khaki' />
|
|
<p>{this.props.info.name}</p>
|
|
</div>
|
|
</div>
|
|
<div className='col-4 md:col-4'>
|
|
<p>Apellido(s)</p>
|
|
<div
|
|
className='p-0 col-2 md:col-2'
|
|
style={{ margin: '0 auto' }}
|
|
>
|
|
<div className='p-inputgroup align-items-center justify-content-evenly'>
|
|
<i className='pi pi-user icon-khaki' />
|
|
<p>{this.props.info.last_name}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='col-4 md:col-4'>
|
|
<p>Identificación</p>
|
|
<div
|
|
className='p-0 col-2 md:col-2'
|
|
style={{ margin: '0 auto' }}
|
|
>
|
|
<div className='p-inputgroup align-items-center justify-content-evenly'>
|
|
<i className='pi pi-user icon-khaki' />
|
|
<p>{this.props.info.dni}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='row my-5 justify-content-center'>
|
|
<div className=' col-4 md:col-4'>
|
|
<p>Teléfono</p>
|
|
<div className='p-0 col-10 md:col-10'>
|
|
<div className='p-inputgroup align-items-center justify-content-evenly'>
|
|
<i className='pi pi-phone icon-khaki'></i>
|
|
<p>{this.props.info.phone}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className=' col-6 md:col-6'>
|
|
<p>Correo Electrónico</p>
|
|
<div
|
|
className='p-0 col-10 md:col-10'
|
|
style={{ margin: '0 auto' }}
|
|
>
|
|
<div className='p-inputgroup align-items-center justify-content-evenly'>
|
|
<i className='pi pi-envelope icon-khaki'></i>
|
|
<p>{this.props.info.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default InfoDialog
|