47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import { Text, Input } from '@pancakeswap/uikit'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
|
|
const PriceContent = styled.div`
|
|
height: 148px;
|
|
background: rgba(238, 234, 244, 0.39);
|
|
border: 1px solid #d7caec;
|
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
|
border-radius: 18px;
|
|
padding: 23px 20px;
|
|
margin-top: 20px;
|
|
`
|
|
const CoinText = styled(Text)`
|
|
font-size: 26px;
|
|
color: #333333;
|
|
text-align: left;
|
|
margin-bottom: 20px;
|
|
`
|
|
|
|
interface ExchangeInputProps {
|
|
name: string
|
|
value?: number | string
|
|
disabled?: boolean
|
|
onChange: (e: React.FormEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
const ExchangeInput: React.FC<ExchangeInputProps> = ({ name, value, onChange, disabled = true }) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<PriceContent>
|
|
<CoinText>{name}</CoinText>
|
|
<Input
|
|
value={value}
|
|
placeholder={t('Please enter the amount')}
|
|
onChange={onChange}
|
|
type="number"
|
|
disabled={disabled}
|
|
/>
|
|
</PriceContent>
|
|
)
|
|
}
|
|
|
|
export default ExchangeInput
|