CardVencimientoJs
CardVencimientoJsunknown
plain_text
a year ago
3.6 kB
2
Indexable
Never
import React from 'react' import styled from "styled-components"; const CardComponentVencimiento = styled.div` &&{ background: #FFFFFF; box-shadow: 0px 0px 2px rgba(14, 31, 53, 0.12), 0px 1px 4px rgba(14, 31, 53, 0.06); border-radius: 16px; width:100%; padding:20px; display:flex; flex-direction:column ; } .texto{ display:flex; flex-direction:column ; .titulo{ font-family: 'SF UI Text'; font-style: normal; font-weight: 500; font-size: 95px; line-height: 150%; color: #124596; align-self:center ; margin:0px; } .sub{ font-family: 'SF UI Text'; font-style: normal; font-weight: 400; font-size: 30px; line-height: 150%; align-self:center ; } .descripcion{ display:flex; flex-direction:column ; margin:0px; .res{ display:flex; .label{ font-family: 'SF UI Text'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 150%; color: #78716C; margin:0px; } .value{ font-family: 'SF UI Text'; font-size: 14px; padding-left: 2px; margin:2px; } } } .hr{ width:100% ; border: 1px solid #E7E5E4; margin:0px; } } ` const CardVencimiento = (props) => { const renderData = () => { let resultado = props.datos.descripcion.map((res, index) => { return <div key={index} className="descripcion"> <div className="res"> {res.label ? <p className="label">{res.label} </p> : null} {res.value ? <p className="value"> {res.value} </p> : null} </div> <div className="res"> {res.labelB ? <p className="label">{res.labelB} </p> : null} {res.valueB ? <p className="value"> {res.valueB} </p> : null} </div> <div className="res"> {res.labelC ? <p className="label">{res.labelC} </p> : null} {res.valueC ? <p className="value"> {res.valueC} </p> : null} </div> <div className="res"> {res.labelD ? <p className="label">{res.labelD} </p> : null} {res.valueD ? <p className="value"> {res.valueD} </p> : null} </div> <div className="res"> {res.labelE ? <p className="label">{res.labelE} </p> : null} {res.valueE ? <p className="value"> {res.valueE} </p> : null} </div> <hr className="hr" /> </div> }) return resultado; } return ( <CardComponentVencimiento> <div className="texto"> {props.datos.titulo ? <p className="titulo">{props.datos.titulo}</p> : null} {props.datos.sub ? <p className="sub">{props.datos.sub}</p> : null} <hr className="hr" /> {renderData() ? renderData() : null} </div> </CardComponentVencimiento> ) } export default CardVencimiento