|
|
@@ -1,65 +1,100 @@
|
|
|
+import React from 'react'
|
|
|
import ProfilePicture from '../Images/man.png';
|
|
|
-
|
|
|
+import { Row, Col, Button } from 'react-bootstrap'
|
|
|
|
|
|
export function Configuracion() {
|
|
|
+
|
|
|
+ let [ filename, setFilename ] = React.useState('');
|
|
|
+ const hiddenFileInput = React.useRef(null);
|
|
|
+
|
|
|
return (
|
|
|
- <div id="content" style={{ paddingTop : 100 }}>
|
|
|
- <div class="content-section">
|
|
|
- <div class="main">
|
|
|
- <h1 class="breadcrumb-header">Configuraciones</h1>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-12">
|
|
|
- <div class="panel">
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-4">
|
|
|
- <div class="img-container">
|
|
|
- <img src={ProfilePicture} alt='profile ' />
|
|
|
- </div>
|
|
|
+ <div className="content-section">
|
|
|
+ <div class="main">
|
|
|
+ <h1 class="breadcrumb-header">Configuraciones</h1>
|
|
|
+ <Row>
|
|
|
+ <Col md="12">
|
|
|
+ <div class="panel">
|
|
|
+
|
|
|
+ <Row style={{ padding : 25 }} class="row">
|
|
|
+ <Col md="4">
|
|
|
+ <div class="img-container">
|
|
|
+ <img src={ProfilePicture} alt='profile ' />
|
|
|
</div>
|
|
|
- <div class="col-md-8">
|
|
|
- <div class="custom-file-upload">
|
|
|
- <input type="file" id="file" name="myfiles[]" multiple readonly />
|
|
|
- </div>
|
|
|
+ </Col>
|
|
|
+ <Col md="8">
|
|
|
+
|
|
|
+ <input
|
|
|
+ value={filename}
|
|
|
+ type="text"
|
|
|
+ className="file-upload-input"
|
|
|
+ disabled=""
|
|
|
+ placeholder="Ningún archivo seleccionado" readOnly
|
|
|
+ />
|
|
|
+
|
|
|
+ <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }}>
|
|
|
+ SUBIR FOTO
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <input
|
|
|
+ multiple={false}
|
|
|
+ type="file"
|
|
|
+ ref={hiddenFileInput}
|
|
|
+ onChange={(event) => {
|
|
|
+ const files = event.target.files;
|
|
|
+ console.log('files crud ', files[0])
|
|
|
+ }}
|
|
|
+ style={{display: 'none'}}
|
|
|
+ />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+
|
|
|
+ <Row class="row">
|
|
|
+ <Col md="6">
|
|
|
+ <div class="inputs_config">
|
|
|
+ <p>Datos personales</p>
|
|
|
+ <label>Nombre</label>
|
|
|
+ <input type="text" name="nombre_user" placeholder="Fernando Vásquez"/>
|
|
|
+ <label>Puesto / Profesión</label>
|
|
|
+ <input type="text" name="puesto" placeholder="Gerente general"/>
|
|
|
+ <label>Dirección</label>
|
|
|
+ <input type="text" name="direccion" placeholder="Melbourn, Australia"/>
|
|
|
+ <label>Número</label>
|
|
|
+ <input type="number" name="numero" placeholder="12345678"/>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-6">
|
|
|
- <div class="inputs_config">
|
|
|
- <p>Datos personales</p>
|
|
|
- <label>Nombre</label>
|
|
|
- <input type="text" name="nombre_user" placeholder="Fernando Vásquez"/>
|
|
|
- <label>Puesto / Profesión</label>
|
|
|
- <input type="text" name="puesto" placeholder="Gerente general"/>
|
|
|
- <label>Dirección</label>
|
|
|
- <input type="text" name="direccion" placeholder="Melbourn, Australia"/>
|
|
|
- <label>Número</label>
|
|
|
- <input type="number" name="numero" placeholder="12345678"/>
|
|
|
- </div>
|
|
|
+ </Col>
|
|
|
+ <Col md="6">
|
|
|
+ <div class="inputs_config">
|
|
|
+ <p>Redes sociales</p>
|
|
|
+ <label>Facebook</label>
|
|
|
+ <input type="text" name="facebook" placeholder="Link de Facebook"/>
|
|
|
+ <label>Linkein</label>
|
|
|
+ <input type="text" name="linkedin" placeholder="Link de Linkedin"/>
|
|
|
+ <label>Instagram</label>
|
|
|
+ <input type="text" name="instagram" placeholder="Link de Instagram"/>
|
|
|
+ <label>Correo</label>
|
|
|
+ <input type="email" name="instagram" placeholder="Correo electrónico"/>
|
|
|
</div>
|
|
|
- <div class="col-md-6">
|
|
|
- <div class="inputs_config">
|
|
|
- <p>Redes sociales</p>
|
|
|
- <label>Facebook</label>
|
|
|
- <input type="text" name="facebook" placeholder="Link de Facebook"/>
|
|
|
- <label>Linkein</label>
|
|
|
- <input type="text" name="linkedin" placeholder="Link de Linkedin"/>
|
|
|
- <label>Instagram</label>
|
|
|
- <input type="text" name="instagram" placeholder="Link de Instagram"/>
|
|
|
- <label>Correo</label>
|
|
|
- <input type="email" name="instagram" placeholder="Correo electrónico"/>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+
|
|
|
+ <Row>
|
|
|
+ <Col md='12'>
|
|
|
+ <div class="boton_guardar_info">
|
|
|
+ <div class="success_btn">
|
|
|
+ <a href="/">Guardar</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="boton_guardar_info">
|
|
|
- <div class="success_btn">
|
|
|
- <a href="/">Guardar</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
+
|
|
|
}
|
amenpunk