CardStats
kyo
plain_text
2 years ago
2.4 kB
3
Indexable
import React from 'react' import styled from "styled-components"; import Avatar from '@mui/material/Avatar'; const CardComponentStats = 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; padding:16px 21px; display: flex; justify-content:space-between ; :hover{ box-shadow: 0px 1px 4px rgba(14, 31, 53, 0.12), 0px 4px 8px rgba(14, 31, 53, 0.1), 0px 6px 12px rgba(14, 31, 53, 0.08); } } /*----------------*/ .text{ .titulo{font-family: 'SF UI Text'; font-size: 16px; color: #27272A;} .sub{ font-family: 'SF UI Text'; font-size: 14px; color: #78716C; margin:0px ; } } /*-----------------*/ .button{ } /*----------------*/ .cardIcon{ align-self:center ; .avatar{ color:#27272A; background: #E2E8F0; border-radius: 60px; } } ` const CardStats = (props) => { return ( <CardComponentStats > {props.datosCardStats.titulo || props.datosCardStats.sub || props.datosCardStats.button ? <div className="cardContent"> <div className="text"> {props.datosCardStats.titulo ? <p className="titulo"> {props.datosCardStats.titulo} </p> : null} {props.datosCardStats.sub ? <p className="sub"> {props.datosCardStats.sub} </p> : null} </div> {props.datosCardStats.button ? <div className="button"> {props.datosCardStats.button} </div> : null} </div> : null} {props.datosCardStats.icon ? <div className="cardIcon"> <Avatar className="avatar"> {props.datosCardStats.icon} </Avatar> </div> : null} </CardComponentStats > ) } export default CardStats