You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
37 lines
1.1 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Box } from 'rebass'
|
|
import { Heading, Text } from 'components/UI'
|
|
import Lightning from 'components/Icon/Lightning'
|
|
import Onchain from 'components/Icon/Onchain'
|
|
import PaperPlane from 'components/Icon/PaperPlane'
|
|
|
|
/**
|
|
* Header for opayment form.
|
|
*/
|
|
class PayHeader extends React.PureComponent {
|
|
static propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
type: PropTypes.oneOf(['onchain', 'offchain'])
|
|
}
|
|
|
|
render() {
|
|
const { title, type } = this.props
|
|
return (
|
|
<Text textAlign="center">
|
|
<Box mx="auto" css={{ height: '55px' }}>
|
|
{type === 'offchain' && <Lightning height="45px" width="45px" />}
|
|
{type === 'onchain' && <Onchain height="45px" width="45px" />}
|
|
{!type && <PaperPlane height="35px" width="35px" />}
|
|
</Box>
|
|
<Heading.h1 mx="auto">{title}</Heading.h1>
|
|
<Heading.h4 mx="auto">
|
|
|
|
{type === 'onchain' && 'On-Chain Payment'} {type === 'offchain' && 'Lightning Payment'}
|
|
</Heading.h4>
|
|
</Text>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default PayHeader
|
|
|