configuration jsx

psicoadmin/src/Css/all.css

@@ -1678,6 +1678,7 @@ button.restore_btn:hover {
     color: #b4bcca;
 }
 .boton_guardar_info {
+    padding : 10px;
     width: 150px;
     float: right;
     text-align: center;

psicoadmin/src/Pages/Configuracion.jsx

@@ -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>
     )
+
 }