123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- 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 className="content-section">
- <div className="main">
- <h1 className="breadcrumb-header">Configuraciones</h1>
- <Row>
- <Col md="12">
- <div className="panel">
- <Row style={{ padding : 25 }} className="row">
- <Col md="4">
- <div className="img-container">
- <img src={ProfilePicture} alt='profile ' />
- </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])
- setFilename(files[0])
- }}
- style={{display: 'none'}}
- />
-
- </Col>
- </Row>
- <Row className="row">
- <Col md="6">
- <div className="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 className="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>
- </Col>
- </Row>
- <Row>
- <Col md='12'>
- <div className="boton_guardar_info">
- <div className="success_btn">
- <span >Guardar</span>
- </div>
- </div>
- </Col>
- </Row>
- </div>
- </Col>
- </Row>
- </div>
- </div>
- )
- }
|