import * as React from 'react' ; import { Dialog , DialogBody , DialogHeader , DialogProps } from '../dialog' ; import Text from '../Text' ; import Grid from '../Grid' ; import Box from '../Box' ; import Icon from '../Icon' ; import styles from './PeersInfoDialog.module.scss' ; interface PeerInfoDialogProps extends DialogProps { peersInfo : { connected : number ; disconnected : number ; banned : number ; } ; } const PeersInfoDialog = props => { const { peersInfo , ... rest } = props ; return ( < Dialog { ... rest } > < DialogHeader > < Text type = { 'h1' } > Peers Info < /Text> < /DialogHeader> < DialogBody > < Box className = { styles . infoRow } > < Grid container fluid spacing = { 3 } > < Grid row > < Grid md = { 4 } xs = { 12 } > < Box className = { styles . infoBlockIcon } > < Icon name = { 'link' } size = { 'xl' } / > < /Box> < Box > < Text > Connected < /Text> < Text type = { 'h1' } > { peersInfo . connected } < /Text> < /Box> < /Grid> < Grid md = { 4 } xs = { 12 } > < Box className = { styles . infoBlockIcon } > < Icon name = { 'link_off' } size = { 'xl' } / > < /Box> < Box > < Text > Disconnected < /Text> < Text type = { 'h1' } > { peersInfo . disconnected } < /Text> < /Box> < /Grid> < Grid md = { 4 } xs = { 12 } > < Box className = { styles . infoBlockIcon } > < Icon name = { 'remove_done' } size = { 'xl' } / > < /Box> < Box > < Text > Banned < /Text> < Text type = { 'h1' } > { peersInfo . banned } < /Text> < /Box> < /Grid> < /Grid> < /Grid> < /Box> < /DialogBody> < /Dialog>); } ; export default PeersInfoDialog ;