import styled from '@emotion/styled' ; import { Box , Heading , BoxProps , Flex } from '@chakra-ui/core' ; export const StyledBox = styled ( Box ) `
  background: white;
  box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03),
    0 1px 2px rgba(102, 119, 136, 0.3);
  overflow: hidden;
  position: relative;
` ; interface BlockProps { title : string ; footer ? : string ; extraInfo ? : string ; } const Block = ( { children , footer , title , extraInfo , ... rest } ) => ( < StyledBox borderRadius = { 5 } background = "white" { ... rest } > < Heading as = "h3" pt = { 8 } pb = { 0 } px = { 2 } minHeight = { '110px' } fontWeight = "bold" color = "gray.600" fontSize = "1.3em" textAlign = "center" > { title } < /Heading> { children } { footer && ( < Flex py = { 5 } px = { 2 } m = { 0 } minHeight = { 100 } alignItems = "center" justifyContent = "center" textAlign = "center" background = "#f8f9fa" borderTop = "solid 1px rgba(102,119,136,.15)" fontFamily = "Space Mono" fontSize = "0.8em" color = "gray.700" > < div dangerouslySetInnerHTML = { { __html : footer } } /> < /Flex>)} < /StyledBox>); export default Block ;