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