Reac front end for psicometric app

Configuracion.jsx 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import React from 'react'
  2. import ProfilePicture from '../Images/man.png';
  3. import { Row, Col, Button } from 'react-bootstrap'
  4. export function Configuracion() {
  5. let [ filename, setFilename ] = React.useState('');
  6. const hiddenFileInput = React.useRef(null);
  7. return (
  8. <div className="content-section">
  9. <div className="main">
  10. <h1 className="breadcrumb-header">Configuraciones</h1>
  11. <Row>
  12. <Col md="12">
  13. <div className="panel">
  14. <Row style={{ padding : 25 }} className="row">
  15. <Col md="4">
  16. <div className="img-container">
  17. <img src={ProfilePicture} alt='profile ' />
  18. </div>
  19. </Col>
  20. <Col md="8">
  21. <input
  22. value={filename}
  23. type="text"
  24. className="file-upload-input"
  25. disabled=""
  26. placeholder="Ningún archivo seleccionado" readOnly
  27. />
  28. <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }}>
  29. SUBIR FOTO
  30. </Button>
  31. <input
  32. multiple={false}
  33. type="file"
  34. ref={hiddenFileInput}
  35. onChange={(event) => {
  36. const files = event.target.files;
  37. console.log('files crud ', files[0])
  38. setFilename(files[0])
  39. }}
  40. style={{display: 'none'}}
  41. />
  42. </Col>
  43. </Row>
  44. <Row className="row">
  45. <Col md="6">
  46. <div className="inputs_config">
  47. <p>Datos personales</p>
  48. <label>Nombre</label>
  49. <input type="text" name="nombre_user" placeholder="Fernando Vásquez"/>
  50. <label>Puesto / Profesión</label>
  51. <input type="text" name="puesto" placeholder="Gerente general"/>
  52. <label>Dirección</label>
  53. <input type="text" name="direccion" placeholder="Melbourn, Australia"/>
  54. <label>Número</label>
  55. <input type="number" name="numero" placeholder="12345678"/>
  56. </div>
  57. </Col>
  58. <Col md="6">
  59. <div className="inputs_config">
  60. <p>Redes sociales</p>
  61. <label>Facebook</label>
  62. <input type="text" name="facebook" placeholder="Link de Facebook"/>
  63. <label>Linkein</label>
  64. <input type="text" name="linkedin" placeholder="Link de Linkedin"/>
  65. <label>Instagram</label>
  66. <input type="text" name="instagram" placeholder="Link de Instagram"/>
  67. <label>Correo</label>
  68. <input type="email" name="instagram" placeholder="Correo electrónico"/>
  69. </div>
  70. </Col>
  71. </Row>
  72. <Row>
  73. <Col md='12'>
  74. <div className="boton_guardar_info">
  75. <div className="success_btn">
  76. <span >Guardar</span>
  77. </div>
  78. </div>
  79. </Col>
  80. </Row>
  81. </div>
  82. </Col>
  83. </Row>
  84. </div>
  85. </div>
  86. )
  87. }